Everything you need to know about :nth-child
Let’s talk about nth-child. You can do a lot of things with it, but most people don’t know most of them.
We’re going to use a blank ol’ 9x9 table as demonstration. Without any nth-child shenanigans, it looks like this:
The basics.
td:nth-child(2) {
background-color: #f15b29;
}
tr:nth-child(3) td {
background-color: #f15b29;
}
Note that indices start from one:
td:nth-child(1) {
background-color: #f15b29;
}
Ranges.
Think of n as a substitute that matches from zero to infinity: so nth-child(n + 4) is the equivalent of nth-child(4), nth-child(5), etc.
td:nth-child(n + 4) {
background-color: #f15b29;
}
You can do the same thing (well, I guess, the opposite thing) with -n, which evaluates to 0, -1, -2, and so on:
tr:nth-child(-n + 7) td {
background-color: #f15b29;
}
Sort of advanced topics.
You can chain these ranges to provide finite subsets:
td:nth-child(n+4):nth-child(-n+6) {
background-color: #f15b29;
}
And, just as you can turn n into -n, you can also turn it into 2n to grab every other element (again, think of n as the infinite set of positive integers, so 2n = 2, 4, 6, 8, ....)
td:nth-child(2n) {
background-color: #f15b29;
}
These multiples can also be modified and chained, just like anything else:
td:nth-child(2n + 1):nth-child(-n + 7) {
background-color: #f15b29
}
You can apply the pseudoselector to multiple elements in a definition (and there are odd and even keywords, too!)
tr:nth-child(odd) td:nth-child(even) {
background-color: #f15b29
}
nth-of-type
There’s also the criminally little-used nth-of-type pseudoselector, which works the exact same way as nth-child except it counts by the number elements of the specific type of the selector, as opposed to nth-child (which counts all child elements.)
Our square table makes the difference difficult to illustrate, since they only have tr elements (which only have td elements.) Instead, lets make something a little kookier:
<div class='examplediv'>
<span>(S) This is some text.</span>
<div>(D) Here is some more text!</div>
<div>(D) Please, sir, can I have some more text?!</div>
<span>(S) Here's the last bit of text.</span>
<div>(D) Ha, just kidding! This is the last element!</div>
<span>(S) (This space intentionally left blank.)</span>
</div>
If we were to try and grab the second span element, nth-child might not necessarily get us what we want:
span:nth-child(2) {
font-weight: bold;
}
This specifies a span element which is also the second child element of its parent; but since the second child element of our parent div is not a span, nothing matches. But if we were to slap a nth-of-type on that bad boy, we’d be golden!
span:nth-of-type(2) {
font-weight: bold;
}
nth-last-child
There’s also nth-last-child, which is nth-child’s evil twin: instead of counting from the first element, this counts from the last element.
td:nth-last-child(2) {
background-color: #f15b29
}
Conclusion
Hope this helped! nth-child is an incredibly powerful front-end tool once you get the hang of it. If there are any other nice recipes or tricks I omitted, lemme know in the comments.