January 27, 2014

Everything you need to know about :nth-child

web development

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>
(S) This is some text.
(D) Here is some more text!
(D) Please, sir, can I have some more text?!
(S) Here's the last bit of text.
(D) Ha, just kidding! This is the last element!
(S) (This space intentionally left blank.)

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;
}
(S) This is some text.
(D) Here is some more text!
(D) Please, sir, can I have some more text?!
(S) Here's the last bit of text.
(D) Ha, just kidding! This is the last element!
(S) (This space intentionally left blank.)

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;
}
(S) This is some text.
(D) Here is some more text!
(D) Please, sir, can I have some more text?!
(S) Here's the last bit of text.
(D) Ha, just kidding! This is the last element!
(S) (This space intentionally left blank.)

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.

You should .

Comments