CSS :nth-child Tester
Test :nth-child expressions interactively with a visual grid and real-time highlighting
Expression Settings
:nth-child(2n+1) { … }
Every 2nd element, starting from the 1st
Visual Grid(10 of 20 selected)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
MatchedUnmatched
Selected Indices (1-based)
135791113151719
10 elements selected: 1, 3, 5, 7, 9, 11, 13, 15, 17, 19
Expression Reference
| Expression | Meaning | Example matches (of 10) |
|---|---|---|
| Odd elements | 1, 3, 5, 7, 9 | |
| Even elements | 2, 4, 6, 8, 10 | |
| Every 3rd | 3, 6, 9 | |
| Every 3rd from 1st | 1, 4, 7, 10 | |
| First 5 only | 1, 2, 3, 4, 5 | |
| 3rd and beyond | 3, 4, 5, 6, 7, 8, 9, 10 | |
| Only 5th | 5 | |
| Odd from 3rd onward | 3, 5, 7, 9 |
An+B formula: Selects elements whose index satisfies An+B for any non-negative integer n.
:nth-last-child / :nth-last-of-type: Counts from the end instead of the start.
:nth-of-type: Only counts siblings of the same element type.