CSS :nth-of-type() Pseudo Class - Learn CSS

The :nth-of-type() pseudo-class matches elements based on their position among siblings of the same type (the same tag name). Counting starts at 1, so p:nth-of-type(1) is the first <p> in a parent, the second <p> is 2, and so on.

The argument inside the parentheses can be a single number, the keyword odd or even, or a formula in the form an + b. This makes it a flexible way to style "every third item", "all even rows", or "everything after the first" without adding extra classes to your HTML.

:nth-of-type() vs :nth-child()

This is the distinction that trips people up most, so it is worth being precise.

:nth-child() counts all sibling elements, then checks whether the matched element happens to be the requested type.
:nth-of-type() counts only siblings of the same type, ignoring everything else.

Consider this markup:

<div>
  <h2>Heading</h2>
  <p>Paragraph A</p>
  <p>Paragraph B</p>
</div>

p:nth-child(2) selects Paragraph A — it is the 2nd child overall, and it is a <p>.
p:nth-of-type(2) selects Paragraph B — it is the 2nd <p>, regardless of the <h2> sitting before it.

Reach for :nth-of-type() when the parent mixes different element types and you want to count only one of them.

Version

Selectors Level 4

Selectors Level 3

Syntax

CSS :nth-of-type() syntax

:nth-of-type(number | odd | even | an+b) {
  css declarations;
}

The argument accepts:

A number — :nth-of-type(3) targets the 3rd element of that type.
odd / even — convenient keywords for alternating items (odd = 1, 3, 5…; even = 2, 4, 6…).
A formula an + b — for example :nth-of-type(3n) matches every 3rd element, and :nth-of-type(2n+1) is the same as odd. Here n starts at 0 and counts up, a is the step, and b is the offset.

Example of the :nth-of-type() selector:

CSS :nth-of-type() code example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:nth-of-type(3) {
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>:nth-of-type() selector example</h2>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
  </body>
</html>

Try it Yourself »

Example of :nth-of-type specified as "odd" and "even":

CSS :nth-of-type() another code example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:nth-of-type(odd) {
        background: #1c87c9;
      }
      p:nth-of-type(even) {
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>nth-of-type() selector example</h2>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
    <p>Paragraph 4</p>
    <p>Paragraph 5</p>
    <p>Paragraph 6</p>
    <p>Paragraph 7</p>
    <p>Paragraph 8</p>
    <p>Paragraph 9</p>
    <p>Paragraph 10</p>
  </body>
</html>

Try it Yourself »

Using an an+b formula

A formula lets you target a repeating pattern. The example below highlights every 3rd paragraph (3n) and, separately, every paragraph from the 4th onward (n+4):

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:nth-of-type(3n) {
        background: #8ebf42;
      }
      p:nth-of-type(n + 4) {
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <h2>nth-of-type() formula example</h2>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
    <p>Paragraph 4</p>
    <p>Paragraph 5</p>
    <p>Paragraph 6</p>
  </body>
</html>

With 3n, paragraphs 3 and 6 get the green background. With n + 4, paragraphs 4, 5, and 6 are bold (every paragraph starting at the 4th).

Good to know

Counting starts at 1, not 0. :nth-of-type(1) is the first match and behaves like :first-of-type.
"Type" means the tag name, not a class. :nth-of-type() cannot count .item elements specifically — it counts all elements with that tag among siblings. If you write .item:nth-of-type(2), it matches an element that is both the 2nd of its type and carries the item class.
To count from the end of the list instead of the start, use :nth-last-of-type().

Practice

What does the CSS :nth-of-type() selector match?

It matches every element that is the nth child, regardless of type, of its parent.It matches every element that is the nth child, of a particular type, of its parent.It matches the unique type of each element in a HTML document.It matches the elements based on their position in a group or a pseudo-class.