CSS nth-child Tester

Home/Tools/nth-child Tester

Test :nth-child, :nth-of-type, and related selectors with a live visual grid.

No sign-up neededRuns in your browserProduction-ready CSS

Pseudo-class

Expression

Presets

10 of 20 elements match :nth-child(2n+1)

Matched positions: 1, 3, 5, 7, 9, 11, 13, 15, 17, 19

Visual Grid

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Generated CSS
li:nth-child(2n+1) {
  background-color: #6366f1;
  color: white;
  border-radius: 8px;
}