Using the :nth-child() CSS pseudo-class

Despite CSS’s relatively simple nature, there are a few things that I just can’t seem to grok. One of these things is the pattern that the :nth-child() pseudo selector takes. Things usually deteriorates into a trial-and-error search for the right pattern. So, let's take a step back and talk about what it does and how it works.

By adding :nth-child() to a selector, you're selecting a sequence from a list of elements, according to the pattern. While keyword patterns like odd or even are easy to predict the result of, something like 3n+1 can be a bit more difficult.

An example

The way to reason about it is to replace n with a sequence of numbers, and nth-child() selects the results.

For the pattern 3n+1:

PatternnEquationSelected element
3n+103 × 0 + 1 = 11
3n+113 × 1 + 1 = 44
3n+123 × 2 + 1 = 77
3n+133 × 3 + 1 = 1010
3n+143 × 4 + 1 = 1313

This is all fine in theory, but becomes confusing when you have to type the pattern for “every third element starting with number four” or determine what 4n+3 will select.

The solution

To quickly and visually get an understanding of how it works, I created a small tool that provides an easier way to reason about it. This helped me, and maybe it will help you too. Give it a try and tell me what you think!

Try it here

More in posts

Removing :focus outline without destroying accessibility

How to remove the :focus outline while improving keyboard navigation.