What does :nth-child() do in CSS?

:nth-child(An+B) matches elements that are the An+Bth child of their parent. 'A' is the cycle size, 'n' is a counter (0, 1, 2, ...), and 'B' is the offset. So :nth-child(3n+1) matches the 1st, 4th, 7th child, etc.

What is the difference between :nth-child and :nth-of-type?

:nth-child counts all sibling elements regardless of tag name, while :nth-of-type counts only siblings of the same element type. For example, :nth-of-type(2) on a matches the second in a container, ignoring any siblings.

What does 'odd' and 'even' mean in :nth-child?

'odd' is equivalent to 2n+1 and matches the 1st, 3rd, 5th ... children. 'even' is equivalent to 2n and matches the 2nd, 4th, 6th ... children. These keywords make alternating row/column striping easy.

How does the negative An+B formula work?

A negative A value counts backwards. :nth-child(-n+3) matches the first 3 children (because n=0 gives 3, n=1 gives 2, n=2 gives 1, n=3 gives 0 which is invalid). It's a common pattern for selecting the first N elements.

Does this tool work fully in the browser?

Yes — 100%. No data is sent to any server. All formula parsing and element matching runs entirely in your browser using JavaScript.

Free CSS Developer Tool

Test CSS :nth-child()
Selectors Instantly

Type any formula — odd, even, 3n+1, -n+4 — and instantly see which elements match. Stop guessing, start styling.

⚡

Real-Time Preview

See matching elements highlighted as you type, with zero delay.

📖

Plain-English Explanations

Every formula is translated into human-readable language so you always know what it means.

📋

Copy-Ready CSS

Get the exact CSS snippet — just copy and paste it into your stylesheet.

Selector Formula

:nth-child()

Elements:16

Meaning: Every 3rd element, starting from the 1st.

Visual Preview

6 / 16 elements match

Matches No match

CSS Snippet

li:nth-child(3n+1) {
  /* your styles */
}

Frequently Asked Questions

Everything you need to know about CSS :nth-child() Tester.

Test CSS :nth-child()Selectors Instantly