The :nth-child selector allows you to select one or more elements based on their source order, according to a formula. It is defined in the CSS Selectors Level 3 spec as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent and sibling elements.
Suppose we are building a CSS grid, and want to remove the margin on every fourth grid module:
<section class="grid">
<article class="module">One</article>
<article class="module">Two</article>
<article class="module">Three</article>
<article class="module">Four</article>
<article class="module">Five</article>
</section>
Rather than adding a class to every fourth item (e.g. .last), we can use :nth-child:
.module:nth-child(4n) {
margin-right: 0;
}
As you can see, :nth-child takes an argument: this can be a single integer, the keywords “even” or “odd”, or a formula. If an integer is specified only one element is selected—but the keywords or a formula will iterate through all the children of the parent element and select matching elements — similar to navigating items in a JavaScript array. Keywords “even” and “odd” are straightforward (2, 4, 6 etc or 1, 3, 5 respectively). The formula is constructed using the syntax an+b, where:
“a” is an integer value
“n” is the literal letter “n”
“+” is an operator and may be either “+” or “-”
“b” is an integer and is required if an operator is included in the formula
What the above CSS does, is select every third list item inside unordered lists. That is, the 3rd, 6th, 9th, 12th, etc.
To change background color
p:nth-child(2) {
background: #ff0000;
}
It boils down to what is in between those parentheses. nth-child accepts two keywords in that spot: even and odd. Those should be pretty obvious. "Even" selects even numbered elements, like the 2nd, 4th, 6th, etc. "Odd" selects odd numbered elements, like 1st, 3rd, 5th, etc.
p:nth-child(odd) {
background: #ff0000;
}
p:nth-child(even) {
background: #0000ff;
}
As seen in the first example, nth-child also accepts expressions in between those parentheses. The simplest possible expression? Just a number. If you put simply a number in the parentheses, it will match only that number element. For example, here is how to select only the 5th element:
ul li:nth-child(5) {
color: #ccc;
}
Let's get back to the "3n+3" from the original example though. How does that work? Why does it select every third element? The trick is understanding the "n" and algebraic expression that represents. Think of "n" as starting at zero and then a set of all positive integers. Then complete the expression. So the 3n is "3xn", and the whole expression together is "(3xn)+3". Now substituting in the zero and positive integers, we get:
(3 x 0) + 3 = 3 = 3rd Element
(3 x 1) + 3 = 6 = 6th Element
(3 x 2) + 3 = 9 = 9th Element
etc.
How about the :nth-child(2n+1)?
(2 x 0) + 1 = 1 = 1st Element
(2 x 1) + 1 = 3 = 3rd Element
(2 x 2) + 1 = 5 = 5th Element
etc.
Hey wait! That's the same as "odd", so probably don't need to use that one very often. But wait now. Haven't we exposed our original example as being overly complicated? What if instead of "3n+3", we used "3n+0", or even simpler "3n".
(3 x 0) = 0 = no match
(3 x 1) = 3 = 3rd Element
(3 x 2) = 6 = 6th Element
(3 x 3) = 9 = 9th Element
etc.
So as you can see, the matches are exactly the same, no need for the "+3". We can use negative n values, as well as use subtraction in the expressions. For example, 4n-1:
(4 x 0) - 1 = -1 = no match
(4 x 1) - 1 = 3 = 3rd Element
(4 x 2) - 1 = 7 = 7th Element
etc.
Using "-n" values seems a little weird, because if the end result is negative there is no match, so you'll need to add to the expression to get it back positive again. As it turns out, this is a rather clever technique. You can use it to select the "first n elements" with "-n+3":
-0 + 3 = 3 = 3rd Element
-1 + 3 = 2 = 2nd Element
-2 + 3 = 1 = 1st Element
-3 + 3 = 0 = no match
etc.
