Developer Tools

CSS :nth-child Tester

Visualize which siblings a CSS :nth-child, :nth-last-child, :nth-of-type, or :nth-last-of-type formula matches. Live preview, presets, and copy-ready code.

Formula (an+b)

Accepts odd, even, a single positive integer, or any an+b form (for example 2n+1, 3n-1, -n+3).

Selector

Presets

Parsed

:nth-child(2n+1)

a = 2, b = 1. Matches every odd position (1, 3, 5, 7, ...).

Live preview

Each square is one sibling. Matched positions are highlighted. Position numbers are 1-based and match the rules of :nth-child.

Items12ParentMix <li> and <p>

Matched positions

1, 3, 5, 7, 9, 11

6 of 12 match in this preview.

Browser cross-check

Running in a non-browser environment.

The browser runs querySelectorAll against an in-memory DOM built from the preview row.

Generated code

CSS rule

li:nth-child(2n+1) {
  /* your styles here */
  background: rgb(59 130 246 / 0.2);
}

HTML markup

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
  <li>Item 9</li>
  <li>Item 10</li>
  <li>Item 11</li>
  <li>Item 12</li>
</ul>

an+b cheat sheet

The formula

a is the step (or stride) and b is the offset. A 1-based position i matches when i = a*n + b for some non-negative integer n (n = 0, 1, 2, ...).

Common values

odd is the same as 2n+1
even is the same as 2n
3n picks every 3rd position starting at 3
3n+1 picks every 3rd starting at 1
-n+3 picks the first 3 only
n+4 picks position 4 and every one after
A plain integer like 5 picks only that exact position

:nth-child vs :nth-of-type

:nth-child(n) counts every sibling under the parent regardless of tag, then checks whether that index matches the formula AND the element type. If a p:nth-child(2) lands on a div, the rule does not apply.
:nth-of-type(n) counts only siblings of the same tag, so p:nth-of-type(2) always picks the second paragraph regardless of any other tags around it.

Counting from the start

Positions start at 1 for the first sibling. :nth-child(1) is the same as :first-child and :nth-child(2) is the second sibling.

How to use

Type a formula in the an+b field (for example 2n+1, odd, 3n, -n+3, or a single integer like 5).
Pick the selector kind: :nth-child, :nth-last-child, :nth-of-type, or :nth-last-of-type.
Drag the Items slider to change the row size, change the parent tag, or toggle Mix <li> and <p> to see how :nth-of-type differs from :nth-child.
Highlighted squares are the positions that match. The Matched positions panel lists them and the browser cross-check confirms the result.
Click Copy on the CSS rule or HTML markup to grab the snippet for your project.

About this tool

CSS :nth-child Tester turns the an+b microsyntax into a live visual. Type a formula (odd, even, 3n+1, -n+3, n+4, or any other valid value), pick :nth-child, :nth-last-child, :nth-of-type, or :nth-last-of-type, and watch the row of siblings light up to show exactly which positions match. Adjust the item count from 4 to 24 and switch between a uniform parent and a mixed <li> and <p> row to see how :nth-of-type counts only siblings of the same tag. Every render is cross-checked against the real browser by running querySelectorAll on an in-memory DOM, so the result is always what your stylesheet will actually do. Presets cover the most common queries (odd, even, every 3rd, first 3, skip first 3, from 5th onward), the parser flags invalid input with a clear message, and the generated CSS rule and HTML markup are one click away from the clipboard. Everything runs locally in your browser, so the selectors you test stay on your device.

Free to use. Works in your browser. No signup, no login.

Related tools

CSS :nth-child Tester

How to use

About this tool

You may also like

CSS Selector Tester

CSS Specificity Calculator

Regex Tester

HTML Formatter

CSS Formatter