pseudo-class

:nth-child() Pseudo-Class

Matches elements based on their position among siblings using an An+B formula or the keywords odd and even. It is essential for zebra-striped tables and repeating patterns.

Syntax

:nth-child(An+B)

Example

tr:nth-child(even) { background: #f6f6f6; } /* Every even row */

✓ Matches

:nth-child(2) matches the 2nd child in a list
:nth-child(odd) matches the 1st, 3rd, 5th children
:nth-child(3n+1) matches the 1st, 4th, 7th children

✗ Does not match

:nth-child(2) does not match the 1st child
:nth-child(odd) does not match the 2nd child

Browser support

Universal support in all browsers since CSS3.

Related selectors

:first-child Pseudo-Class

:first-child

:not() Negation Pseudo-Class

:not(selector)

:has() Relational Pseudo-Class

← All CSS selectors · CSS selectors cheat sheet