Skip to content
Convertto

nth-child Generator — See Exactly What Matches

Build an :nth-child formula and see which items it selects out of a row.

The an + b formula is evaluated with n counting up from zero, not one, which is why 3n + 1 selects the 1st, 4th and 7th items rather than the 3rd, 6th and 9th. Indexes outside the list simply match nothing, and that is what makes negative steps useful: -n + 3 counts down and selects the first three. :nth-child counts every sibling regardless of type, while :nth-of-type counts only siblings of the same element — a difference that quietly breaks selectors when a heading is added to a list of paragraphs.

Runs in your browser
Privacy
Runs entirely in your browser — nothing is uploaded
Cost
Free, unlimited, no sign-up

Frequently asked questions

Why does 3n + 1 start at 1?

Because n starts at 0, so the first value is 3 × 0 + 1 = 1, then 4, then 7. If you want the 3rd, 6th and 9th, the formula is plain 3n.

How do I select the first three items?

-n + 3. As n counts up the result counts down — 3, 2, 1, then zero and negatives, which match nothing. For the last three, :nth-last-child(-n + 3) does the same from the other end.

What is the difference from :nth-of-type?

:nth-child counts every sibling, so inserting one heading into a list of paragraphs shifts every subsequent index. :nth-of-type counts only siblings of the same element type, which is usually what people meant.

How to use the nth-child selector generator

  1. 1Choose the pattern.
  2. 2Set the a — the step.
  3. 3Set the b — the offset.
  4. 4Set the items to preview.
  5. 5The result appears immediately — copy or download it.

Embed this tool

Put the working nth-child selector generator on your own site. It runs in your visitors' browsers exactly as it does here — free, no account, nothing uploaded.

Share this tool

Related tools

CSS Specificity CalculatorWork out a selector's specificity and see which parts contributed what.CSS Border Radius GeneratorDrag eight handles to shape every corner: elliptical radii, inverted corners and squircles.CSS Box Shadow GeneratorDesign a CSS box-shadow with live values for offset, blur, spread and colour.CSS Button GeneratorDesign a button and copy the CSS, including the hover, active and focus-visible states.CSS Clamp GeneratorGenerate fluid clamp() values that scale smoothly between two viewport widths.CSS Clip Path GeneratorCut an element to a polygon, circle, ellipse or inset, and copy the clip-path.

Last updated

More css generators