CSS :first-of-type Pseudo Class

❮ Prev Next ❯

The CSS :first-of-type pseudo-class selects an element that is the first element of its type in the list of children of its parent. It is the same as :nth-of-type.

The :first-of-type selector is actually similar to :nth-child but there is a difference: it is less specific. The :first-of-type selector targets a specific type of an element in the arrangement only with relation to similar siblings.

Beginning with Selectors Level 4 it is not required from the selected element to have a parent.

Version

Selectors Level 3

Selectors Level 4

Syntax

:first-of-type {
  css declarations;
}

Example of the :first-of-type selector:

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

Try it Yourself »

Example of the :first-of-type selector with the <article> tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:first-of-type {
        font-size: 22px;
        color: #777777;
      }
    </style>
  </head>
  <body>
    <h2>:first-of-type selector example</h2>
    <article>
      <h2>This is a title.</h2>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. .</p>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. .</p>
    </article>
  </body>
</html>

Try it Yourself »

Example of the :first-of-type selector with some HTML tags:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        margin: 0;
      }
      article:first-of-type {
        background-color: #777777;
        color: #ffffff;
      }
    </style>
  </head>
  <body>
    <h2>:first-of-type selector example</h2>
    <article>
      <p>This is a first element!</p>
      <p>This <em>nested 'em' is first</em>!</p>
      <p>This <strong>nested 'strong' is first</strong>, but this <strong>nested 'strong' is last</strong>!</p>
      <p>This <span>nested 'span' gets styled</span>!</p>
      <q>This is a 'q' element!</q>
      <p>This is a last element.</p>
    </article>
  </body>
</html>