CSS: nth-child selector

By Xah Lee. Date: 2026-05-12. Last updated: 2026-07-13.

tag:nth-child(n)

The nth child element (OF ANY PARENT).

And it also match tag (optional).

Count starts at 1.

tag here is compound selector, or none, which means the universal selector (* any tag).

/* nth column in a table */
.align6033 td:nth-child(2) {
 text-align: right;
 background-color: silver;
}

Name	Count	farm
Rick	78	dog
David	1372	cat
Marc	10298	fish
Jackson	31317	bats
Lee	41156	fish

CSS: Styling HTML Table

tag:nth-child(even)

Match tag if it is even'th child element.

🟢 TIP: this is useful for table rows, columns, or list items. [CSS: Styling HTML Table]

.xeven6308 tr:nth-child(even) {
 background-color: silver;
}

even
cat	1
cat	2
cat	3
cat	4
cat	5
cat	6

tag:nth-child(odd)

Match tag if it is odd'th child element.

.xodd0118 tr:nth-child(odd) {
 background-color: silver;
}

odd
cat	1
cat	2
cat	3
cat	4
cat	5
cat	6

tag:nth-child(An)

every Ath.

🛑 WARNING: no space before n.

/* every 3rd */
.x3rd2886 tr:nth-child(3n) {
 background-color: silver;
}

every 3rd
cat	1
cat	2
cat	3
cat	4
cat	5
cat	6
cat	7
cat	8
cat	9
cat	10

tag:nth-child(An + B)

A is the step size.
B is the offset.
n goes from 0 to infinity.

/* every 2n , starting at offset 5 */
.offset3511 tr:nth-child(2n+5) {
 background-color: silver;
}

2n, offset 5
cat	1
cat	2
cat	3
cat	4
cat	5
cat	6
cat	7
cat	8
cat	9
cat	10
cat	11
cat	12

example. first 3

.allbefore4161 tr:nth-child(-n+3) {
 background-color: silver;
}

first 3
cat	1
cat	2
cat	3
cat	4
cat	5

example. rest starting at 4th

.allrest4201 tr:nth-child(n+4) {
 background-color: silver;
}

first 3
cat	1
cat	2
cat	3
cat	4
cat	5

:nth-child(arg of selector)

tag:nth-child(arg of selector)

supported by browsers since 2024.

Elements that match selector, and is the argth child occurance of this condition.

In other words, it filters children that does not match selector first, then applies tag:nth-child(arg) logic.

tag:nth-child(arg of selector) is similar to but more powerful than :nth-of-type(), because we can filter by any class or compound selector not just tag name (aka type).

steps to match:

Consider children of a parent.
Consider only the children that matches selector.
Of these children, consider if it is the nth. (or every argth of the normal nth-child parameter.)
Consider it also match tag.

For example, if you have:

li:nth-child(2 of .x)

it means:

look at all children of any element.
it must have class x.
of these children, is it the second?
if so, is it also a list item li?

example. :nth-child(2 of .x)

here's a html.

<ul class="Mdp73">
<li class="x">dog 1</li>
<li class="a">dog 2</li>
<li class="x">dog 3</li>
</ul>

if we use this CSS:

.Mdp73 li:nth-child(2 of .x) {
 border: solid 1px grey;
}

browser shows:

dog 1
dog 2
dog 3

it match the “dog 3”, because, of all children that are also class x, the “dog 3” is second.

example 2. contrast with .x:nth-child(2)

now if we use this css:

.p5Gx9 li.x:nth-child(2) {
 border: solid 1px grey;
}

and

<ul class="p5Gx9">
<li class="x">dog 1</li>
<li class="a">dog 2</li>
<li class="x">dog 3</li>
</ul>

browser shows:

dog 1
dog 2
dog 3

no match. because, second child is the “dog 2”, but it does not have class x.

example 3.

now if we use

.YM6BQ li:nth-child(2 of .x) {
 border: solid 1px grey;
}

<ul class="YM6BQ">
<li class="x">dog 1</li>
<li class="x">dog 2</li>
<li class="x">dog 3</li>
</ul>

browser shows:

dog 1
dog 2
dog 3

match “dog 2”, because of all children that also has class x, the second one one is “dog 2”, and it matches YM6BQ li

CSS: nth-child selector

example. first 3

example. rest starting at 4th

:nth-child(arg of selector)

example. :nth-child(2 of .x)

example 2. contrast with .x:nth-child(2)

example 3.

CSS. Selectors

Selector types

Simple selectors

Combinators

Selector list

Nesting syntax

Special selector

Misc

CSS selectors by sibling criteria