CSS :nth-child Tester

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.

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).

nth-child Formula Reference

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.

Real-World Use Cases

Zebra Striping Tables

Alternate row colors to improve readability of data tables:

If your table has a <thead>, you do not need to account for it in the row count. <thead> and <tbody> are separate parents, so tr elements inside <tbody> are counted from 1 on their own, unaffected by the header row.

Style the First Item Differently

Make the first card in a grid a featured or hero item:

Limit Visible Items

Hide all list items after the fourth without changing the HTML:

Every 4th Grid Item: Different Style

Add a visual break or accent color every fourth card:

Last Three Items

Style the last three items using :nth-last-child():

nth-child 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.

nth-child vs nth-of-type

These two selectors are frequently confused:

• :nth-child(n): Counts all sibling elements regardless of tag. p:nth-child(2) matches a <p> only if it is the second child of its parent, regardless of whether that second child is a <p> or not.
• :nth-of-type(n): Counts only siblings of the same element type. p:nth-of-type(2) matches the second <p> among its siblings, ignoring any non-<p> elements between them.

If your list has mixed element types, :nth-of-type() is usually more predictable. For uniform lists and tables, both work identically.

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:

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:

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

1. Choose whether to test :nth-child or :nth-last-child using the Test Mode toggle
2. Click any Quick Preset to see a common formula in action
3. Or type your own formula in the input field, it updates live as you type
4. Increase or decrease the number of Items using the slider to test edge cases
5. Selected elements are highlighted in purple. The count shows how many match.
6. 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.

How do I select only the first 3 elements?

Use :nth-child(-n+3). The negative A value means the formula produces decreasing results: 3, 2, 1, all valid positions. For n=0: 3, n=1: 2, n=2: 1, n=3: 0 (invalid). So it selects positions 1, 2, and 3.

What is the difference between :nth-child and :nth-of-type?

:nth-child() counts all sibling elements of any type. :nth-of-type() counts only siblings of the same element type. In a list of only <li> elements, they behave identically. In mixed content (e.g. a div with both headings and paragraphs), they produce different results.

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.

Why does :nth-child not seem to work on my element?

The most common reason is that the element is not at the expected position. :nth-child() counts from the parent's perspective, if there are other sibling elements (like a heading before the list items), the count includes them. Check the actual DOM structure, not just what you see on screen.

Does :nth-child() count from 0 or 1?

It always counts starting at 1, never 0. :nth-child(0) never matches any element. In an An+B formula the counter n itself starts at 0, but the position it produces still has to be 1 or greater to match anything.

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.