Target every nth element with CSS
Stripe table rows, clear floats on every third card, style the last item — nth-child patterns with a live 24-item preview.
Tools used in this guide
The job
:nth-child() selects by position — odd/even for zebra stripes, 3n for every third card, 5 for the fifth, an+b for arithmetic sequences, and ranges for 'items 3 through 7'. Getting the pattern right by trial and error is slow; the preview shows matches instantly.
Pattern + pseudo
Pick the pattern kind, then the pseudo-class: nth-child counts all siblings, nth-of-type counts same-tag siblings, nth-last-child counts from the end. The grid of 24 numbered cells highlights exactly what your selector hits.
Worked example
Every third item starting at the second is formula a=3, b=1 → :nth-child(3n+1) hits 1, 4, 7, 10…; 'the last 3 items' is formula a=−1, b=3 under nth-last-child → :nth-last-child(-n+3) lights items 22–24 of 24.
Where it stops
The builder covers the common forms — odd, even, n, index, an+b, ranges — but :nth-child also accepts An+B of selectors and of-syntax. Indexes 1–10,000 and coefficients ±1,000 only.