CSS :nth-child Tester
Type any :nth-child or :nth-last-child formula and see which elements get selected instantly. A free nth-child calculator with live visual feedback.
What is :nth-child in CSS?
The :nth-child() pseudo-class selector matches elements based on their position among siblings inside a parent element. 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 starting offset.
It is one of the most powerful CSS selectors for styling repeating patterns, like table rows, list items, and grid cards, without needing to add extra classes to each element in your HTML.
Use this page as a quick nth-child calculator too: type a formula, pick an item count, and see the matching positions instantly, no need to write any CSS or open DevTools first.
How the An+B Formula Works
The formula An+B is evaluated for every integer value of n starting at 0. Any element whose position matches the result gets selected.
n=0 → 3(0)+1 = 1 ✓ selected
n=1 → 3(1)+1 = 4 ✓ selected
n=2 → 3(2)+1 = 7 ✓ selected
n=3 → 3(3)+1 = 10 ✓ selected
→ Selects elements 1, 4, 7, 10, 13...
Negative A values select a limited range. For example, -n+3 selects only the first 3 elements (positions 3, 2, 1, all within the element list). Click any Quick Preset above to see a formula's exact matches highlighted live, or see the nth-child guide for the full formula reference table and real-world recipes.
Testing :nth-last-child Formulas
Switch the Test Mode toggle above the formula input from :nth-child to :nth-last-child to count from the end of the list instead of the start. The same An+B rules apply unchanged, only the direction of counting flips.
For example, with the mode set to :nth-last-child, typing 1 highlights the very last item regardless of how many total items exist, and -n+3 highlights the last three. For more advanced :nth-last-child patterns, including quantity queries and the CSS Level 4 of S syntax, see the nth-child advanced guide.
A Gotcha With Flexbox and Grid
:nth-child() always counts source order in the HTML, not visual order. If you reorder items on screen with the flexbox or grid order property, :nth-child() still targets based on where each element sits in the markup, not where it appears visually. This trips up a lot of developers who expect nth-child to follow the reordered layout.
Related Selectors
- :nth-last-child(n): Same as
:nth-child()but counts from the end of the sibling list. - :nth-of-type(n): Counts only siblings of the matching element type.
- :nth-last-of-type(n): Counts element type siblings from the end.
- :first-child: Shorthand for
:nth-child(1). - :last-child: Matches the last sibling. Equivalent to
:nth-last-child(1). - :only-child: Matches an element that is the only child of its parent.
Browser Support
The :nth-child() selector is supported by all modern browsers and has been since IE9. The CSS Selectors Level 4 spec added an optional of S syntax (:nth-child(2 of .class)) for filtering by selector, this is supported in Safari and newer versions of Chrome and Firefox but not universally yet.
Using :nth-child in JavaScript
Standard CSS :nth-child() syntax works directly inside querySelector and querySelectorAll, no translation needed:
document.querySelector('.card:nth-child(2)');
jQuery supports :nth-child() too, with the same 1-based counting as native CSS:
Browser automation and testing tools such as Selenium and Playwright also accept :nth-child() as a CSS locator. For multi-language examples covering Selenium, BeautifulSoup, and Google Tag Manager, see the CSS selectors guide.
nth-child in Tailwind CSS
Tailwind CSS v4 added native nth-* and nth-last-* variants, so common formulas no longer need arbitrary variant syntax:
<li class="nth-last-5:font-bold">...</li>
<li class="nth-of-type-4:text-primary">...</li>
<li class="nth-[2n+1_of_li]:bg-slate-800">...</li>
Tailwind also ships built-in odd:, even:, first:, and last: variants for the most common cases. If you are on an older Tailwind version, or need a formula the built-in variants do not cover, fall back to the arbitrary variant syntax:
How to Use This Tester
- Choose whether to test :nth-child or :nth-last-child using the Test Mode toggle
- Click any Quick Preset to see a common formula in action
- Or type your own formula in the input field, it updates live as you type
- Increase or decrease the number of Items using the slider to test edge cases
- Selected elements are highlighted in purple. The count shows how many match.
- Click Copy CSS to copy the selector ready to use in your stylesheet
Frequently Asked Questions
What does :nth-child(odd) select?
It selects every element at an odd position (1st, 3rd, 5th, 7th...) among its siblings. It is equivalent to :nth-child(2n+1). Commonly used for alternating table row colors.
Can I use :nth-child with a class selector?
Yes, but it behaves as a filter, not a counter. .item:nth-child(2) matches an element that has the class item AND is the 2nd child of its parent, not the 2nd element with that class. If you need the 2nd element with a specific class, JavaScript is more reliable than pure CSS.
How do I count how many children an element has with CSS?
CSS cannot output a number as text, so you cannot display "5 items" using CSS alone. You can style based on position with nth-child, or style based on the total count using the nth-last-child plus first-child quantity-query trick. For an actual number to use in your code, read element.children.length in JavaScript.
Can I test :nth-last-child formulas with this tool?
Yes. Switch the mode toggle above the formula input from :nth-child to :nth-last-child, and the same An+B rules apply, just counted from the end of the list instead of the start.
Does :nth-child work with Tailwind CSS?
Yes. Tailwind CSS v4 added native nth-3, nth-last-5, and similar variants, plus arbitrary values like nth-[2n+1_of_li]. Older versions, and formulas the built-in variants do not cover, use the arbitrary variant syntax such as [&:nth-child(3n)]:your-utility.
For the full An+B formula reference table, real-world recipes (zebra striping, limiting visible items, grid patterns), and the difference between :nth-child and :nth-of-type, see the CSS nth-child guide.