CSS nth-child Tester
The :nth-child pseudo-class is one of the most powerful tools in a web developer's arsenal, yet its mathematical nature can be a hurdle. Whether you are creating zebra-striped tables, complex staggered grids, or highlighting specific data ranges, understanding the logic behind An + B is key to writing clean, maintainable CSS.
This interactive playground takes the guesswork out of the equation. Adjust the sliders, experiment with advanced ranges, and see exactly how your selectors behave in real-time. Once you've perfected your pattern, simply copy the code and drop it into your project.
nth-child Options
View nth-child Selection
div:nth-child(2n+1)
About CSS nth Tester / Generator
This interactive CSS :nth-child() tester is designed to help you see how CSS selectors work - not just read about them.
Instead of guessing which elements will be selected, you can visually explore how different formulas behave in real time. Adjust the values, switch between grid and list views, or try built-in presets to instantly understand how selectors like 2n + 1, -n + 3, or custom ranges actually work.
Whether you’re learning CSS for the first time or brushing up on advanced selector logic, this tool makes experimentation fast, visual, and intuitive.
What you can do
- 🔢 Test any
:nth-child()formula using live sliders - 🎯 Explore presets for common patterns like odd, even, ranges, and offsets
- 🔍 See exactly which items are selected in real time
- 🧠 Understand the math behind the selector with clear, human-readable explanations
- 🔁 Switch between list and grid views to see how structure affects selection
- 📋 Copy ready-to-use CSS for your projects
Why this exists
CSS selectors can feel unintuitive - especially when negative values or ranges are involved. This tool removes the guesswork by turning abstract formulas into something you can see, tweak, and understand instantly.
It’s built to be:
- beginner-friendly
- accurate to the CSS spec
- useful for real-world layouts
Who it’s for
- Front-end developers
- Designers learning CSS
- Students exploring selectors
- Anyone who’s ever thought “wait… why did that element get selected?”
Tip 💡
Try switching between presets and then fine-tuning the values - it’s one of the fastest ways to build intuition around nth-child() behavior.
Frequently Asked Questions
What does :nth-child() do in CSS?
:nth-child() is a CSS pseudo-class that matches elements based on their position among their siblings inside a parent.
You pass it a formula - either a keyword like odd or even, a plain number, or an An+B expression - and it selects every element whose position satisfies that formula.
It is commonly used for zebra-striping tables, highlighting specific list items, and creating repeating layout patterns without adding extra classes to the HTML.
How does the An+B formula work in :nth-child()?
The formula An+B selects every Ath element starting from position B, where n is a counter that starts at 0 and increases by 1 each step.
So 3n+1 selects items 1, 4, 7, 10 - every third item starting from the first.
A controls the interval (the step) and B controls the offset (where the sequence begins).
Either value can be zero or negative - -n+3 selects the first three items by producing positions 3, 2, 1, 0 (and negative positions are ignored).
What is the difference between :nth-child() and :nth-of-type()?
:nth-child() counts all sibling elements regardless of their tag type, then checks if the matched element also fits the type selector.
:nth-of-type() counts only siblings of the same tag type before applying the position formula.
For example, if a list mixes <li> and <dt> elements, li:nth-child(2) only matches the second child if it happens to be an <li>, while li:nth-of-type(2) matches the second <li> regardless of what other elements appear between them.
How do I select every other row in a table with CSS?
Use tr:nth-child(even) to select every even-numbered row, or tr:nth-child(odd) for every odd-numbered row.
For example:
tr:nth-child(even) { background-color: #f2f2f2; }
This is the standard approach for zebra-striped tables. If your table has a header row inside a <thead>, it is counted separately from the <tbody> rows, so the striping will not be thrown off by the header.
How do I select the first N elements with :nth-child()?
Use a negative step with a positive offset: :nth-child(-n+N) where N is the number of elements you want.
For example, :nth-child(-n+3) selects the first three elements.
The formula works because substituting n=0, 1, 2, 3 produces positions 3, 2, 1, 0 - and since position 0 and negative positions do not exist, only items 1, 2, and 3 are matched.
How do I select a range of elements with :nth-child()?
Combine two :nth-child() selectors: use :nth-child(n+X) to select from item X onwards, and :nth-child(-n+Y) to select up to item Y.
Chaining them together targets only the overlap - items X through Y inclusive.
For example, li:nth-child(n+4):nth-child(-n+8) selects list items 4, 5, 6, 7, and 8.
What is the difference between :nth-child(odd) and :nth-child(2n+1)?
They are exactly equivalent - odd is simply a keyword alias for 2n+1, and even is an alias for 2n.
Both select the same elements and have identical browser support. The keyword versions are generally easier to read and are preferred in most codebases for their clarity.
Does :nth-child() count hidden or invisible elements?
Yes. :nth-child() counts elements based on their position in the DOM, not their visual state.
Elements with display: none, visibility: hidden, or zero opacity are still counted in the sibling sequence.
This means that if you hide some list items with JavaScript, the positions of the remaining visible items do not change, and your :nth-child() patterns may produce unexpected results on the visible elements.
How do I select the last N elements using CSS?
Use :nth-last-child() instead of :nth-child() - it works identically but counts from the end rather than the start.
To select the last three elements use :nth-last-child(-n+3).
To select only the very last element you can use either :nth-last-child(1) or the more readable :last-child.
Can I use :nth-child() with any HTML element, or only lists?
It works on any HTML element that has siblings inside a parent - not just list items.
You can use it on table rows (tr), grid or flex children (div, article, etc.), paragraphs, images, or any other element.
The only requirement is that the elements share the same direct parent, since :nth-child() counts siblings within a single parent container.