The :nth-child() pseudo-class matches elements by their 1-based index among all sibling children of the same parent — any tag type counts in the position.
Use it for zebra stripes, “every third item,” or “the first three.” Example: li:nth-child(odd) styles items 1, 3, 5, ….
Core odd / even / An+B patterns are long-supported. The newer of <selector> form has narrower historical support — treat it as progressive when you need filtered counting.
:nth-child( <An+B> | even | odd)Optional filter: :nth-child(even of .noted). Examples: :nth-child(3), :nth-child(2n), :nth-child(-n+3).
Pass one pattern that describes which sibling indices to match:
:nth-child()Count siblings from the parent, then style the matching positions.
ul, tbody, …).odd, a number, or An+B.li:nth-child(pattern) (or tr, div, …).| Piece | Required? | Role |
|---|---|---|
| Shared parent | Yes | Siblings share one child list |
| Pattern | Yes | odd, even, number, or An+B |
| Element type | Usually | Must also match (e.g. li) at that index |
of filter | Optional | Count only among a filtered subset |
Change the pattern. Highlighted items are the ones that match li:nth-child(…).
Short patterns that are easy to remember. Use Try It Yourself for a live editor.
Highlight every odd list item.
<style>
li:nth-child(odd) {
background: #dbeafe;
}
</style>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>odd matches 1 and 3. Same as 2n+1.even or 2n for the other stripe.tr:nth-child(odd) on tbody rows.Style only the third child.
<style>
li:nth-child(3) {
color: #b91c1c;
font-weight: 700;
}
</style>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>3 is only the third child.:nth-child(0n+3) or combining with :first-child when the index is 1.li:nth-child(3) does not match that element.-n+3)Match a range with an An+B formula.
<style>
li:nth-child(-n+3) {
border-left: 4px solid #2563eb;
}
</style>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>n = 0, 1, 2, … compute -n+3 → 3, 2, 1 (then 0, −1… ignored).n+4 would mean “from the 4th onward.”Most confusion comes from counting all siblings, not only matching tags.
A nested em or text wrapper still takes an index. Prefer :nth-of-type() when you only want same-tag positions.
n starts at 0Elements are 1-based. In An+B, n runs 0, 1, 2, … so 5n first hits 5 (not 0).
of changes what you count:nth-child(2 of .noted) is the 2nd .noted sibling — not “the 2nd child if it has .noted.” Test support before relying on it.
Zebra stripes can look broken when a row is hidden. Filtered counting (even of :not([hidden])) can fix that where supported.
:nth-child() is a browser CSS pseudo-class. Node.js, Deno, and Bun do not apply it.
odd, even, and An+B have been available across browsers for years (CSS3 Selectors). The of <selector> syntax is newer — check support if you need filtered counting. Internet Explorer 9+ supports the classic form.
Bottom line: Safe for zebra stripes and An+B patterns everywhere modern. Use of selectively. This is not a JavaScript runtime API.
odd = 2n+1, even = 2n.li:nth-child(odd) { … }.:nth-of-type() instead.One line: :nth-child() paints by position in the sibling list — count carefully, style lightly.
Learn how to select siblings by counting from the end.
5 people found this page helpful