I'm not going to lie, using nth-child has always made my brain hurt when using it in CSS. Maybe it's the fact that math is involved and for the most part, I can avoid math in most other areas of CSS except this. I'm certainly not the first person to take a crack at explaining it but I thought I'd give it a try.

View the Nth-Child Visual Calculator »

Simply Algebra

Using nth-anything in CSS takes many of us back to our 9th grade Algebra class. The reason for this is the formula used for nth-child uses "variables". These are represented as n. The example below is an example:

ol li:nth-child(2n+1) { ... }

Nth-Child Iteration Table

Below is a table illustrating how our formula above works. It will loop until there are no more elements to loop through using the base selector ol li

Nth-Child Iteration Table
N Nth-Selector Math Formula Result
0 2n+1 2 * 0 + 1 1 (first element)
1 2n+1 2 * 1 + 1 3 (third element)
2 2n+1 2 * 2 + 1 5 (fifth element)
3 2n+1 2 * 3 + 1 7 (seventh element)
4 2n+1 2 * 4 + 1 9 (ninth element)

The selector ol li:nth-child(2n+1) will therefore select every odd element in the ordered list.

Keywords

CSS also has some keyword values that can be used for nth-child to make writing the formulas easier for common nth-child selectors:

ol li:nth-child(even) { ... } ol li:nth-child(odd) { ... }

Common Nth-Child Selectors

A quick shortcut to remember if you want to select every "x" element is to take the number you're looking for and multiply it times n.

Common Nth-Child Selectors
Child Selector
Every Second Element ol li:nth-child(2n)
Every Third Element ol li:nth-child(3n)
Every Fourth Element ol li:nth-child(4n)
Every Fifth Element ol li:nth-child(5n)

Other Nth-Child Selectors

Nth-Child also accepts negative numbers and subtraction as well as single numbers to select a specific element by its index.

Other Nth-Child Selectors
Child Selector
Only the First Element ol li:nth-child(1)
Only the Third Element ol li:nth-child(3)
Only the First Three Elements ol li:nth-child(-n+3)

Still Confused?

Check out the handy nth-child visual calculator I created and enter in some of the examples I've provided in my article. It will visually run and select the elements from your selector.

Further Reading