nth-child Selector Generator
Build CSS selectors visually. Select items in the grid below and get ready-to-use :nth-child() selectors.
Try Kinsta free for 30 days
Simply better WordPress hosting. Unlimited migrations.
Quick Presets
Click a preset to apply it, or customize below.
Custom Formula
Build your own pattern: :nth-child(An + B) selects every A-th item, starting from position B.
2n + 1
Visual Preview
0
selected
24
total items
Generated Selectors
Primary Selector
:nth-child(odd)
With :is() wrapper
li:is(:nth-child(odd))
With :where() wrapper (0 specificity)
li:where(:nth-child(odd))
How It Works
:nth-child(odd)
Selects every odd-numbered child element (1st, 3rd, 5th, etc.). This is equivalent to :nth-child(2n+1).
Quick Reference
Common nth-child patterns and what they select:
:nth-child(odd)
1st, 3rd, 5th... (same as 2n+1)
:nth-child(even)
2nd, 4th, 6th... (same as 2n)
:nth-child(3n)
Every 3rd: 3rd, 6th, 9th...
:nth-child(3n+1)
Every 3rd, starting from 1st
:nth-child(-n+3)
First 3 items only
:nth-last-child(-n+3)
Last 3 items only