CSS :nth-child Tester
Type any :nth-child formula and see which elements get selected instantly.
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.
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).
nth-child Formula Reference
even → 2, 4, 6, 8... (same as 2n)
3n → 3, 6, 9, 12...
3n+1 → 1, 4, 7, 10...
3n+2 → 2, 5, 8, 11...
2n+3 → 3, 5, 7, 9...
-n+3 → 1, 2, 3 (first 3 only)
-n+5 → 1, 2, 3, 4, 5 (first 5 only)
n+4 → 4, 5, 6, 7... (from 4th onward)
5n-2 → 3, 8, 13, 18...
1 → first element only
2 → second element only
Real-World Use Cases
Zebra Striping Tables
Alternate row colors to improve readability of data tables:
tr:nth-child(even) { background: #ffffff; }
Style the First Item Differently
Make the first card in a grid a featured or hero item:
grid-column: span 2;
font-size: 1.25rem;
}
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 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.
How to Use This Tester
- 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.
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.