:nth-child()
The :nth-child() pseudo-class matches elements by their position among siblings using a formula.
Syntax
:nth-child(an+b | even | odd | n of S)Examples
tr:nth-child(even) { background: #f6f6f6; }
li:nth-child(3) { font-weight: 700; }
.item:nth-child(3n) { margin-right: 0; }
Output
Zebra-stripes table rows, bolds the third list item, and zeroes the right margin of every third grid item.
Notes
Formula an+b is 1-indexed; keywords even and odd are common. The modern "of S" syntax (e.g. :nth-child(2 of .active)) counts only matching siblings. :nth-of-type counts by element type.
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 4.0 |
| firefox | 3.5 |
| safari | 3.1 |
| edge | 12 |