← Back to pseudo-classes

CSS Pseudo-class / Element

:nth-child()

Structural

Selects elements based on their position among siblings.

Syntax

selector:nth-child(n) { }

Example

li:nth-child(odd) { background: #111; }

Common use cases

  • Zebra striping in tables or lists
  • Selecting every 3rd element in a grid
  • Targeting specific items without adding classes

Practical developer insight

:nth-child(n) counts all siblings regardless of type — use :nth-of-type() if you only want to count elements of the same tag.

Related

:nth-of-type():first-child:last-child