AtoZ CSS Screencast: nth-child and nth-of-type

This screencast is a part of our AtoZ CSS Series. You can find other entries to the series here.

Transcript

:nth-child is a pseudo class used to select elements by a numeric expression.

The syntax is quite different to most other aspects of CSS and can be a bit tricky to get your head around, to begin with.

In this episode we’ll look at

• the various ways of using :nth-child,
• the slightly more flexible :nth-of-type selector
• and their counterparts selectors :nth-last-child and :nth-last-of-type.

:nth-child

:nth-child selects child elements if their position in the document matches a pattern described by an algebraic expression.

The :nth-child selector looks a bit like this:

[code language="css"]
li:nth-child(expression) { }
[/code]

The “expression” can either be the keywords even or odd, a whole number or a formula in the pattern of an+b where a and b are whole numbers - positive or negative.

Continue reading %AtoZ CSS Screencast: nth-child and nth-of-type%

by Guy Routledge via SitePoint