Type a CSS an+b formula and watch the matched children highlight in real time. Switch between :nth-child, :nth-of-type, :nth-last-child, and :nth-last-of-type; mix child types to see how of-type changes the count; or try the Selectors 4 of S filter syntax.
li.a
type B — li.b
type C — li.c
an+b formula works
For every non-negative integer n (0, 1, 2, …), the selector matches the child at position a·n + b (1-based). The formula 2n+1 expands to positions 1, 3, 5, 7… — every odd-indexed child. 3n is 3, 6, 9… The keywords odd (= 2n+1) and even (= 2n) are shortcuts. A plain integer like 5 matches only that one position.
| Formula | Matches positions | Notes |
|---|---|---|
odd | 1, 3, 5, 7, … | = 2n+1 |
even | 2, 4, 6, 8, … | = 2n |
3n | 3, 6, 9, … | every 3rd |
3n+1 | 1, 4, 7, … | starts at 1, step 3 |
n+4 | 4, 5, 6, … | everything from 4 onwards |
-n+3 | 1, 2, 3 | first three only |
5 | 5 | a single child |
0n+1 / 1 | 1 | first child |
:nth-child counts every sibling; :nth-of-type counts only siblings of the same element type. Add of S (Selectors 4, supported in Safari 9+ and Chrome 111+) to count only siblings matching the selector S — e.g. :nth-child(2n+1 of .a) picks every odd .a child.