What Is the :nth-of-type() CSS Selector?

:nth-of-type() selects one or more child elements among their direct siblings of the same node type.

Syntax of the CSS :nth-of-type() Selector

:nth-of-type() accepts one argument only. Here is the syntax:

html-element:nth-of-type(value) {
  style declarations
}

The value argument can be one of the following:

1. A number: For instance, using 3 represents the third child.
2. The keyword even or odd: We use it to represent even or odd children.
3. The formula An+B: We use it to express 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:

• :nth-of-type() is a CSS pseudo-class selector.
• The :nth-of-type() selector works on direct siblings only.
• 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 of the CSS :nth-of-type() Selector

Below are examples of how to use the CSS :nth-of-type() pseudo-class selector.

Apply DeepPink to the third <p> element type

The :nth-of-type() selector below selects the third <p> element among its siblings of the same node type.

p:nth-of-type(3) {
  color: DeepPink;
}

Assuming the snippet below is the HTML document for the above CSS ruleset, browsers will apply DeepPink to the third <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 Editing It

The :nth-of-type() 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 Editing It

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

Therefore, if you add one more <p> node to the <section> element, the p:nth-of-type(3) selector will apply DeepPink to the fifth and sixth <p> items.

<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>
    <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 Editing It

AD

Apply DeepPink to every odd <p> element type

The :nth-of-type() selector below selects every <p> child element with an odd index.

p:nth-of-type(odd) {
  color: DeepPink;
}

Note

1 is the index position of the first child element.

Assuming the snippet below is the HTML document for the above CSS ruleset, browsers will apply DeepPink to the first and third <p> elements.

<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 Editing It

Apply DeepPink to every even <p> element type

The :nth-of-type() selector below selects the every <p> child element with an even index.

p:nth-of-type(even) {
  color: DeepPink;
}

Note

1 is the index position of the first child element.

Assuming the snippet below is the HTML document for the above CSS ruleset, browsers will apply DeepPink to the second, fifth, 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 Editing It

Note

Browsers will apply DeepPink to the fifth paragraph because it is the second <p> node of the <section> element.

Apply DeepPink to the third <p> element type, fifth, seventh, and so on

The :nth-of-type() 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-of-type(2n + 3) {
  color: DeepPink;
}

Fun Quiz: If the snippet below is the HTML document for the above CSS ruleset, which elements will the browser style?

<p>First paragraph element</p>
<p>Second paragraph element</p>
<p>Third paragraph element</p>
<p>Fourth paragraph element</p>
<p>Fifth paragraph element</p>
<p>Sixth paragraph element</p>
<p>Seventh paragraph element</p>
<p>Eight paragraph element</p>
<p>Nineth paragraph element</p>
<p>Tenth paragraph element</p>
<p>Eleventh paragraph element</p>
<p>Twelfth paragraph element</p>

Try Editing It

AD

Apply DeepPink to the first <p> element type, third, fifth, and so on

The :nth-of-type() 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-of-type(2n-3) {
  color: DeepPink;
}

Fun Quiz: If the snippet below is the HTML document for the above CSS ruleset, which elements will the browser style?

<p>First paragraph element</p>
<p>Second paragraph element</p>
<p>Third paragraph element</p>
<p>Fourth paragraph element</p>
<p>Fifth paragraph element</p>
<p>Sixth paragraph element</p>
<p>Seventh paragraph element</p>
<p>Eight paragraph element</p>
<p>Nineth paragraph element</p>
<p>Tenth paragraph element</p>
<p>Eleventh paragraph element</p>
<p>Twelfth paragraph element</p>

Try Editing It

Apply DeepPink to the first three <p> element type

The :nth-of-type() selector below applies DeepPink to the first three <p> child elements.

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

Fun Quiz: If the snippet below is the HTML document for the above CSS ruleset, which elements will the browser style?

<p>First paragraph element</p>
<p>Second paragraph element</p>
<p>Third paragraph element</p>
<p>Fourth paragraph element</p>
<p>Fifth paragraph element</p>
<p>Sixth paragraph element</p>
<p>Seventh paragraph element</p>
<p>Eight paragraph element</p>
<p>Nineth paragraph element</p>
<p>Tenth paragraph element</p>
<p>Eleventh paragraph element</p>
<p>Twelfth paragraph element</p>

Try Editing It

Note

• 1 is the index position of the first child element.
• The -n+3 syntax always selects the first three <p> child elements because:
  • -1 + 3 = 2
  • -2 + 3 = 1
  • -3 + 3 = 0

:nth-of-type() vs. :nth-child() – What’s the Difference?

nth-child selects its items from any group of elements. nth-of-type selects its items from a specified type of element.

:nth-of-type() selects items from a specified group of elements. For instance, selecting a <p> node from a group of <p> siblings.

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

Note

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