This screencast is a part of our AtoZ CSS Series. You can find other entries to the series here.
: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
- the slightly more flexible
- and their counterparts selectors
:nth-child selects child elements if their position in the document matches a pattern described by an algebraic expression.
:nth-child selector looks a bit like this:
The “expression” can either be the keywords
odd, a whole number or a formula in the pattern of
b are whole numbers – positive or negative.
:nth-child can be used to select a range of different elements under different circumstances, it’s difficult to explain how it works and what it’s for. Let’s look at a series of examples to illustrate its uses.
I have an unordered list, with 12 list items. Let’s see how we can use
:nth-child to match a specific item or pattern of items:
To select the third list-item, I could use
To select all the even items, I can use
even keyword. Conversely, I can use
:nth-child(odd) to select all the odd numbered items. These are commonly used selectors to stripe the background colour of alternate rows in a table of data.
To select every third item, I can use
To select the first 4 items, I can use
li:nth-child(-n+4). To select everything except the first 4 items, I can use
We’ve seen how
:nth-child(odd) can select all the odd numbered items in a list. An alternative approach to using the
oddkeyword is to use the expression
But how does the expression work?
When the expression, in the format
an+b contains non-zero values for
b, the child elements are split into groups of
If the expression was
2n+1, the child elements would be split into groups of 2. Each element in the group is then given an index, starting at 1. The matched element in each group is
bth index. In this example, that would be the first element.
If the expression was
3n+2, the list items would be grouped into sets of 3 and the second item in each group would be matched.
If the value of
b is negative, the matched element in the group is the
bth index but counted backwards from index 1. In this instance, the matched element from a group will no longer match an element in that group, but in one above it.
even keyword can be expressed as
2n. In this case, there is no value for
b in the
an+b expression so each
ath element is matched instead;
2n would match every second element,
3n every third,
4n every fourth an so on.
I personally find this idea of splitting child elements into groups and working out the matched index for each group very confusing – although that is how the CSS selectors spec describes it.
I can cope with the idea of matching every nth element – every 2nd or 3rd or 4th etc. and then I like to think as the second part of the expression as an offset.
In the case of
2n+1 I would read it as follows: “Find every second element, move the selection down by 1.”
If the expression was
3n-5 it would read: “Find every third element and move the selection up by 5.”
:nth-child has a corresponding
:nth-last-child pseudo class which works in the same way as
:nth-child but in reverse.
li:nth-last-child(3n) starts at the last child element and works backwards, matching every third element from the bottom of the list. This is far less common and something I don’t think I’ve ever used in a production site before.
It is however, very common to select either the first or last child element. This could be done with
:nth-last-child(1) but is so common, there are
:last-child pseudo classes available as well.
:first-child is the only one of this family of child selectors that works in IE8 –
:last-child and any of the
:nth selectors do not.
Something that often catches me out with
:nth-child is that the selector just matches based on index of child elements and doesn’t take the type of element into account.
Let’s look at the following markup for a snippet of content.
<p>Aenean commodo ligula eget dolor. Vestibulum dapibus nunc ac augue;</p>
<p>Nunc sed turpis. Donec posuere vulputate arcu;</p>
I have a section with a heading and sub-heading and a series of paragraphs beneath. I want to make the first paragraph stand out a bit by increasing the
I might try
section p:first-child, as I want to style the first paragraph in the section. But this doesn’t work as the first child of the section is actually a
h1 element. In this case, I need to use the
There are a series of these type selectors;
:nth-last-of-type. These behave the same way as
:nth child but match the
nth instances of a certain type of element.
These selectors are complex but very powerful. The browser support is IE9+ with the exception of
:first-child which is IE8+. Bear this in mind when using them, but they’ve certainly gotten me out of a few difficult situations in the past.