CSS Nth Child Tester

Type any nth-child formula and see which elements get selected instantly.

:nth-child( )
Selected: 0 elements
li:nth-child(odd)
Invalid formula. Try: odd, even, 2n, 3n+1, -n+3
li:nth-child(odd) { /* your styles */ }

What is :nth-child in CSS?

The :nth-child() selector matches elements based on their position among siblings. It accepts a formula using the pattern An+B, where A is the cycle size, n is a counter starting at 0, and B is the offset. It is one of the most powerful CSS selectors for styling lists, tables, and grids without adding extra classes.

How nth-child Formulas Work

odd → every odd element (1, 3, 5...)
even → every even element (2, 4, 6...)
3n → every 3rd element (3, 6, 9...)
3n+1 → every 3rd starting from 1st
-n+3 → first 3 elements only
n+4 → all elements from 4th onward

Common Use Cases

Zebra striping tables — tr:nth-child(odd)

First item styling — li:nth-child(1)

Last three items — li:nth-last-child(-n+3)

Every 4th grid item — .card:nth-child(4n)