# 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.

**URL:** https://convertto.tech/t/nth-child-generator
**Category:** CSS Generators (https://convertto.tech/c/css-generators)
**Privacy:** Runs entirely in the browser; no upload
**Cost:** Free, no sign-up
**Last updated:** 2026-08-01

## Key facts

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

## How to use

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

## FAQ

### 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.

## Related tools

- [CSS Specificity Calculator](https://convertto.tech/t/css-specificity-calculator): Work out a selector's specificity and see which parts contributed what.
- [CSS Border Radius Generator](https://convertto.tech/t/border-radius-generator): Drag eight handles to shape every corner: elliptical radii, inverted corners and squircles.
- [CSS Box Shadow Generator](https://convertto.tech/t/box-shadow-generator): Design a CSS box-shadow with live values for offset, blur, spread and colour.
- [CSS Button Generator](https://convertto.tech/t/css-button-generator): Design a button and copy the CSS, including the hover, active and focus-visible states.
- [CSS Clamp Generator](https://convertto.tech/t/css-clamp-generator): Generate fluid clamp() values that scale smoothly between two viewport widths.
- [CSS Clip Path Generator](https://convertto.tech/t/css-clip-path-generator): Cut an element to a polygon, circle, ellipse or inset, and copy the clip-path.
- [CSS Multi-Column Generator](https://convertto.tech/t/css-columns-generator): Flow text into balanced columns with a rule between them.
- [CSS Hover Effect Generator](https://convertto.tech/t/css-hover-effects-generator): Generate a hover effect that animates cleanly, with the reduced-motion guard included.