Skip to main content

What Is the :nth-child() CSS Selector?

:nth-child() selects one or more child elements among their direct siblings regardless of their node types.

info
  • :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:

  1. A number. For instance, using 3 to represent the third child.
  2. The keyword even or odd—for representing even or odd children.
  3. 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 multiplying A and n.

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>

Try it on StackBlitz

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>

Try it on StackBlitz

The p:nth-child(3) selector will apply DeepPink only to the fourth <p> node because it is the third child of its parent.

Buy CSS Flexbox book

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.

note

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>

Try it on StackBlitz

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.

note

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>

Try it on StackBlitz

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

note

1 is the index of the first child element.

p:nth-child(2n + 3) {
  color: DeepPink;
}

Try it on StackBlitz

Buy CSS Flexbox book

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

note

1 is the index of the first child element.

p:nth-child(2n-3) {
  color: DeepPink;
}

Try it on StackBlitz

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.

p:nth-child(-n + 3) {
  color: DeepPink;
}

Try it on StackBlitz

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

info

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.

Tags:
Last updated on by Oluwatobi Sofela