What Is the :nth-child() CSS Selector?
:nth-child() selects one or more child elements among their direct siblings regardless of their node types.
:nth-child()
is a CSS pseudo-class selector.- The
:nth-child()
selector works on direct siblings only.
Syntax
:nth-child()
accepts one argument only. Here is the syntax:
html-element:nth-child(value) {
style declarations
}
The value
argument can be one of the following:
- A number. For instance, using
3
to represent the third child. - The keyword
even
orodd
—for representing even or odd children. - The formula
An+B
for expressing a series of numbers. For instance,2n+3
expresses these numbers:[(2x0)+3]
,[(2x1)+3]
,[(2x2)+3]
,[(2x3)+3]
, and so on.
Note the following:
In the An+B
formula,
A
is an integer value of your choice.n
is the multiplier that automatically increases from zero (0
).+
(or-
) is the addition (or subtraction) operator.B
is an optional offset value for increasing (or decreasing) the result derived after multiplyingA
andn
.
Examples
Below are examples of how to use the CSS :nth-child()
pseudo-class selector.
Apply DeepPink to the <p>
node that is its parent's third child
The :nth-child()
selector below selects the <p>
element that is its parent's third child.
p:nth-child(3) {
color: DeepPink;
}
So, suppose the snippet below is the HTML document for the above CSS ruleset. Browsers will apply DeepPink
to the second <p>
element only.
<h1>First heading 1 element</h1>
<p>First paragraph element</p>
<p>Second paragraph element</p>
<h2>First heading 2 element</h2>
<p>Third paragraph element</p>
<h3>First heading 3 element</h3>
<p>Fourth paragraph element</p>
<p>Fifth paragraph element</p>
The :nth-child()
selector works on direct siblings only. For instance, suppose you re-write the HTML snippet above to include nested elements as follows:
<article>
<h1>Article's first heading 1 element</h1>
<p>Article's first paragraph element</p>
<h2>Article's first heading 2 element</h2>
<p>Article's second paragraph element</p>
<section>
<h3>Article's first heading 3 element</h3>
<p>Article's third paragraph element</p>
<p>Article's fourth paragraph element</p>
</section>
<h2>Article's second heading 2 element</h2>
<p>Article's fifth paragraph element</p>
<p>Article's sixth paragraph element</p>
</article>
The p:nth-child(3)
selector will apply DeepPink
only to the fourth <p>
node because it is the third child of its parent.
Apply DeepPink to every odd child that is a <p>
node
The :nth-child()
selector below selects every odd child element that is a <p>
node.
1
is the index position of the first child element.
p:nth-child(odd) {
color: DeepPink;
}
So, suppose the snippet below is the HTML document for the above CSS ruleset. Browsers will apply DeepPink
to the fourth <p>
element only.
<h1>First heading 1 element</h1>
<p>First paragraph element</p>
<h2>First heading 2 element</h2>
<p>Second paragraph element</p>
<h3>First heading 3 element</h3>
<p>Third paragraph element</p>
<p>Fourth paragraph element</p>
Apply DeepPink to every even child that is a <p>
node
The :nth-child()
selector below selects every even child element that is a <p>
node.
1
is the index position of the first child element.
p:nth-child(even) {
color: DeepPink;
}
So, suppose the snippet below is the HTML document for the above CSS ruleset. Browsers will apply DeepPink
to the first, second, fourth, and sixth <p>
elements.
<article>
<h1>Article's first heading 1 element</h1>
<p>Article's first paragraph element</p>
<h2>Article's first heading 2 element</h2>
<p>Article's second paragraph element</p>
<p>Article's third paragraph element</p>
<section>
<h3>Article's first heading 3 element</h3>
<p>Article's fourth paragraph element</p>
<p>Article's fifth paragraph element</p>
</section>
<h2>Article's second heading 2 element</h2>
<p>Article's sixth paragraph element</p>
<p>Article's seventh paragraph element</p>
</article>
Apply DeepPink to the third child element, seventh, eleventh and so on that is a <p>
node
The :nth-child()
selector below selects every <p>
child element whose index is a multiple of two (2
) with an offset of three (+3
).
1
is the index of the first child element.
- CSS
- HTML
p:nth-child(2n + 3) {
color: DeepPink;
}
<p>First paragraph element</p>
<p>Second paragraph element</p>
<p>Third paragraph element</p>
<p>Fourth paragraph element</p>
<div><p>Fifth paragraph element</p></div>
<p>Sixth paragraph element</p>
<p>Seventh paragraph element</p>
<p>Eight paragraph element</p>
<div><p>Nineth paragraph element</p></div>
<p>Tenth paragraph element</p>
<p>Eleventh paragraph element</p>
<p>Twelfth paragraph element</p>
Apply DeepPink to the first child, third, fifth, and so on that is a <p>
node
The :nth-child()
selector below selects every <p>
child element whose index is a multiple of two (2
) with an offset of negative three (-3
).
1
is the index of the first child element.
- CSS
- HTML
p:nth-child(2n-3) {
color: DeepPink;
}
<p>First paragraph element</p>
<p>Second paragraph element</p>
<p>Third paragraph element</p>
<p>Fourth paragraph element</p>
<div><p>Fifth paragraph element</p></div>
<p>Sixth paragraph element</p>
<p>Seventh paragraph element</p>
<p>Eight paragraph element</p>
<div><p>Nineth paragraph element</p></div>
<p>Tenth paragraph element</p>
<p>Eleventh paragraph element</p>
<p>Twelfth paragraph element</p>
Apply DeepPink to the <p>
nodes that are one of the first three children of their parent
The :nth-child()
selector below applies DeepPink
to the <p>
nodes that are one of their parent's first three elements.
- CSS
- HTML
p:nth-child(-n + 3) {
color: DeepPink;
}
<article>
<h1>Article's first heading 1 element</h1>
<p>Article's first paragraph element</p>
<h2>Article's first heading 2 element</h2>
<p>Article's second paragraph element</p>
<p>Article's third paragraph element</p>
<section>
<h3>Article's first heading 3 element</h3>
<p>Article's fourth paragraph element</p>
<p>Article's fifth paragraph element</p>
</section>
<h2>Article's second heading 2 element</h2>
<p>Article's sixth paragraph element</p>
<p>Article's seventh paragraph element</p>
</article>
:nth-child()
vs. :nth-of-type()
– What's the Difference?
:nth-child()
selects items from a general group of elements—for instance, selecting a <p>
node from a mixed group that includes <h1>
, <div>
, and <section>
.
:nth-of-type()
selects items from a specified group of elements—for instance, selecting a <p>
node from a group of <p>
siblings.
Other similar pseudo-class selectors are:
:first-child
:first-of-type
:last-child
:last-of-type
:nth-last-child()
:nth-last-of-type()
:only-of-type
Overview
This article discussed what the CSS :nth-child()
pseudo-class selector is. We also used examples to see how it works.