CSS :nth-child Tester
Test CSS :nth-child formulas (odd, even, 2n+1, 3n, -n+3) visually — matching items highlight live so you can see exactly what a selector picks. Free.
💡 About :nth-child
:nth-child(an+b)selects elements by position. Tryodd,even,3n,3n+1, or-n+3.- Highlighted squares are the ones your formula matches.
- Use it for zebra-striped rows, grids, and styling specific items.
Free CSS :nth-child Tester
Test CSS :nth-child selectors visually and see exactly which elements they match. Type a formula like 2n+1, 3n, odd, or -n+3, choose how many items, and watch the matching squares highlight live — then copy the selector. Free, no sign-up, runs in your browser.
What is the :nth-child selector?
:nth-child is a CSS pseudo-class that selects elements based on their position among their siblings. It powers zebra-striped table rows, grid styling, and picking out specific items like every third card. The syntax can be a keyword (odd, even), a single number, or the formula an+b — which is powerful but easy to get wrong. This tester shows you the result instantly so you can dial in the exact pattern.
How to use the nth-child tester
It is instant:
- Type a formula — odd, even, 2n+1, 3n, -n+3, or a plain number.
- Set how many items are in the list.
- The matching squares light up so you can see the pattern.
- Copy the selector when it does what you want.
Understanding the an+b formula
In :nth-child(an+b), the browser walks through positive whole numbers for n (0, 1, 2, 3…) and selects the element at each resulting position. So 3n matches 3, 6, 9…, while 3n+1 matches 1, 4, 7…. The keyword odd is shorthand for 2n+1 and even for 2n. A plain number like 5 matches only the fifth element. Negative coefficients like -n+3 select a range from the start — in this case the first three elements.
Common nth-child patterns
A few formulas cover most real-world needs:
- odd / even — classic zebra striping for table rows and lists.
- 3n — every third item, useful in grids.
- 3n+1 — the first item of each group of three (great for clearing rows).
- -n+3 — the first three items (for highlighting a top set).
- n+4 — everything from the fourth item onward.
nth-child vs nth-of-type
It is worth knowing the difference. :nth-child counts all sibling elements regardless of type, so :nth-child(2) only matches if the second child happens to be the element you targeted. :nth-of-type counts only elements of the same type, so p:nth-of-type(2) always matches the second paragraph even if other elements sit between them. When your selection seems off, an intervening element of a different type is often the reason — switching to nth-of-type may be what you want.
Pro tip
Remember that n starts at 0, so an+b includes the b-th element as the first match. If a pattern is off by one, adjust b. For grid layouts, combine nth-child rules to style rows and columns, and test each formula here first so you are not guessing in your stylesheet. For broader selector help, our other CSS tools complement this one.
FAQ
Is this :nth-child tester free?
What does :nth-child(2n+1) select?
What is the difference between odd/even and an+b?
How do I select the first N elements?
What is the difference between nth-child and nth-of-type?
Why is my selector off by one?
Does :nth-child work in all browsers?
Related tools
Pro tip: pair this tool with CSS Box-Shadow Generator and CSS Flexbox Generator for a faster SEO workflow.