CSS :nth-child() Generator
Build :nth-child, :nth-of-type, and An+B formulas with a live matching grid. Copy CSS selectors in your browser. Free and private.
Loading tool...
What is CSS :nth-child() Generator?
The CSS :nth-child() Generator is a free browser tool that builds An+B selectors and shows which siblings match on a live grid.
Key Benefits
- Confirm zebra, every-nth, and first-n patterns before editing CSS
- Compare child versus of-type counting on the same list
- Preview Selectors Level 4 of() filtering
- Copy a ready CSS rule without leaving the page
Common Use Cases
- •Styling alternating table rows or list items
- •Highlighting the first three cards in a grid
- •Selecting every third product tile
- •Learning An+B notation with instant visual feedback
How to Use the CSS :nth-child() Generator
- Choose a formula: Pick a preset such as odd or first 3, or type an An+B formula like 3n+1.
- Pick a pseudo-class: Select :nth-child, :nth-of-type, or a last-child variant depending on how you want siblings counted.
- Check the grid: Watch the live preview highlight matching items and adjust the item count if needed.
- Copy the CSS: Set a base selector and declarations, then copy the generated rule into your stylesheet.
Key Features
- An+B parser for odd, even, integers, and formulas like 3n+1
- Live numbered grid showing which siblings match
- :nth-child, :nth-of-type, :nth-last-child, and :nth-last-of-type
- Optional Selectors Level 4 of() filter
- Copy a complete CSS rule with custom declarations
Frequently Asked Questions
What does An+B mean in :nth-child?
A is the cycle size and B is the offset. The browser tests sibling positions 1, 2, 3, ... against A times n plus B for n starting at 0. odd is 2n+1 and even is 2n.
How is :nth-of-type different from :nth-child?
:nth-child counts every sibling. :nth-of-type counts only elements with the same tag name, so a span among divs has its own sequence.
What does the of() filter do?
In Selectors Level 4, :nth-child(2n of .featured) counts only siblings that match .featured, then applies An+B to that filtered list. This tool dims non-matching items in the preview.
Is my CSS uploaded?
No. Formula parsing and the preview grid run entirely in your browser. Nothing is sent to a server.