:nth-child()
Selects elements by position among siblings: every other one, every third, the first three, or everything from the seventh on.
Example
#tbody tr:nth-child(even) {
background: #18181b;
}<style>
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 6px 10px; text-align: left; }
th + th, td + td { text-align: right; }
thead { color: #a1a1aa; }
</style>
<table>
<thead><tr><th>Player</th><th>EXP</th></tr></thead>
<tbody>
<tr><td>Ania</td><td>1240</td></tr>
<tr><td>Bartek</td><td>1180</td></tr>
<tr><td>Celina</td><td>990</td></tr>
<tr><td>Darek</td><td>870</td></tr>
</tbody>
</table>Definition and usage
#The :nth-child() pseudo-class numbers all of a parent’s children starting at 1, and selects the ones whose number matches the argument. The argument can be a specific number (3), the keyword odd or even, or an An+B formula.
The An+B formula reads like this: the browser substitutes 0, 1, 2, 3… for n in turn, and selects the elements whose resulting numbers come out. 2n+1 gives 1, 3, 5, the same as odd; 3n gives 3, 6, 9; and -n+3 gives 3, 2, 1, meaning the first three elements. Results below 1 are skipped.
Just like :first-child, the pseudo-class counts every one of the parent’s children regardless of tag or class. The selector .card:nth-child(2) selects the second child if it happens to have the class card, not the second card. The :nth-child(2 of .card) syntax solves this: it first keeps the elements matching the selector after of, then numbers only those. It works in every major browser as of 2023.
Counting from the end is done with :nth-last-child(), and counting only elements with the same tag with :nth-of-type().
Syntax
#:nth-child( <number> | odd | even | An+B [of <selector>]? )Arguments
#1, 3, 5, 7, 9
The odd-numbered elements. The classic striping for tables and lists.2, 4, 6, 8, 10
The even-numbered elements, the same as the2nformula.3
Exactly the third child of the parent.3, 6, 9
Every third element, meaning numbers that are multiples of three.1, 4, 7, 10
Every third element, starting from the first. In a three-column grid, that’s the whole first column.1, 2, 3
The first three elements. For n = 0, 1, 2 you get 3, 2, 1, and further results fall below 1 and drop out.7, 8, 9, 10
From the seventh element all the way to the end, however many there are.second of .hot
First the elements with the classhot(with a yellow border) are kept, then numbered from 1. Element 4 is selected, the second one among them.
Arguments in practice
#odd
span:nth-child(odd) { background: #7c3aed; color: #fff; }even
2n formula.span:nth-child(even) { background: #7c3aed; color: #fff; }3
span:nth-child(3) { background: #7c3aed; color: #fff; }3n
span:nth-child(3n) { background: #7c3aed; color: #fff; }3n+1
span:nth-child(3n+1) { background: #7c3aed; color: #fff; }-n+3
span:nth-child(-n+3) { background: #7c3aed; color: #fff; }n+7
span:nth-child(n+7) { background: #7c3aed; color: #fff; }2 of .hot
hot (with a yellow border) are kept, then numbered from 1. Element 4 is selected, the second one among them.span:nth-child(2 of .hot) { background: #7c3aed; color: #fff; }More examples
#.ranking li:nth-child(-n+3) {
color: #fbbf24;
font-weight: 700;
}<ol class="ranking stage" style="display: grid; gap: 4px; margin: 0; padding: 10px 10px 10px 34px; color: #a1a1aa;">
<li>Ania, 1240 EXP</li>
<li>Bartek, 1180 EXP</li>
<li>Celina, 990 EXP</li>
<li>Darek, 870 EXP</li>
<li>Ewa, 640 EXP</li>
</ol>The -n+3 formula always selects the first three places, no matter how long the list is.
Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- The easiest way to check a formula is in your head: substitute 0, 1, 2, 3 for
nand see what numbers come out. - Remember that every one of the parent’s children is counted. When different elements are mixed together inside, use
:nth-of-type()or theof Ssyntax. - Table stripes (
tr:nth-child(even)) are the classic use case: they make it easier to track long rows with your eyes.
Related entries
#- :nth-child() vs :nth-of-type()nth-child() counts every one of the parent’s elements, regardless of tag. nth-of-type() only counts siblings that share the same tag as the chosen selector.
- :nth-of-type()Selects elements by position among siblings with the same tag, for example every other image or the third paragraph.
- :first-childMatches an element that is the first child of its parent.
- :last-childMatches an element that is the last child of its parent.
- :not()Selects elements that match neither the given selector nor any selector in the list.
- :is()Matches an element against any selector in a list. Shortens long, repetitive selectors into a single notation.
Spotted a mistake or missing an example? Write to us.