CSS Pixels
Explore Tools
Home/Tools/Utilities/nth-child Tester
Utilities · Generator

nth-child Tester

Test :nth-child, :nth-of-type, and related selectors with a live visual grid.

Pseudo-class

Expression

Presets

10 of 20 elements match :nth-child(2n+1)

Matched positions: 1, 3, 5, 7, 9, 11, 13, 15, 17, 19

Visual Grid

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Generated CSS
li:nth-child(2n+1) {
  background-color: #6366f1;
  color: white;
  border-radius: 8px;
}
100%
Free, no
sign-up needed
0
Code written
by hand
85+
CSS tools
in one place
<1s
Copy-ready
CSS instantly
What is this

What is the CSS nth-child Tester?

Test nth-child and nth-of-type selector patterns visually. Enter any An+B formula and see which list items match in real-time.

Everything runs locally in your browser. Adjust the controls above, preview instantly, and copy clean, production-ready CSS — no account, no upload.

How to use

Using the CSS nth-child Tester

Everything lives in the panel at the top of this page. There is nothing to install — it all runs right here in your browser.

1

Enter an An+B formula

Type a formula like 2n+1, 3n, -n+3, or a keyword like odd or even. The tester highlights matching items in the preview list.

2

Adjust list length

Change the number of items in the preview to test how the formula behaves with different list lengths.

3

Copy the selector

Click Copy to get the :nth-child(formula) selector.

The output

What the generated code looks like

Clean, production-ready CSS — no vendor bloat, no unnecessary declarations.

nth-patterns.css
/* Every odd item */
li:nth-child(odd) { background: #f5f5f7; }

/* Every 3rd item */
li:nth-child(3n) { color: #0071e3; }

/* First 3 items */
li:nth-child(-n+3) { font-weight: bold; }

/* Items 4 through 8 */
li:nth-child(n+4):nth-child(-n+8) { opacity: 0.5; }

/* Last item */
li:last-child { border-bottom: none; }

/* Every 2nd item starting from 4th */
li:nth-child(2n+4) { background: #e8f0fe; }
Common mistakes & fixes

Common mistakes & how to fix them

A few habits trip people up. Here is what to watch for — and the exact fix.

Confusing nth-child with nth-of-type

:nth-child(2) selects the second child of its parent regardless of element type. If the second child is a <span> not a <p>, a p:nth-child(2) selector matches nothing.

Fix: Use :nth-of-type when you want the second element of a specific type. Use :nth-child when you want the nth DOM node regardless of type.

Pro tips

Pro tips for better results

★

Range pattern: :nth-child(n+A):nth-child(-n+B)

To select items A through B, chain two nth-child selectors: li:nth-child(n+3):nth-child(-n+7) selects items 3, 4, 5, 6, and 7.

FAQ

Frequently asked questions

n is an integer that starts at 0 and counts up: 0, 1, 2, 3... The formula is evaluated for each value of n. For 2n+1: n=0 gives 1, n=1 gives 3, n=2 gives 5 — selecting all odd items.
:nth-child(0) is valid syntax but matches nothing. nth-child counts start at 1, not 0. The first child is :nth-child(1), equivalent to :first-child.

Related tools

View all tools →
CSSCSS Variables GeneratorUtilitiesMEDMedia Query GeneratorUtilitiesZINZ-Index VisualizerUtilitiesCONContainer Query GeneratorUtilities

From the blog

Read more →
Guides

Modern CSS techniques every developer should know

A practical tour of the CSS features that replaced yesterday’s hacks.

7 min read·Guides
Workflow

From design to code without the friction

How visual generators speed up the build without sacrificing clean output.

5 min read·Workflow
Fundamentals

Writing CSS that scales with your project

Tokens, naming, and structure that keep large stylesheets maintainable.

6 min read·Fundamentals