W3docs
en
Log in

CSS :first-of-type Pseudo Class

The :first-of-type CSS pseudo-class selects the first element of its type among other sibling elements. Read about the pseudo-class and try examples.

The CSS :first-of-type pseudo-class selects an element that is the first element of its type among its siblings. It is equivalent to [:nth-of-type(1)](/learn-css/nth-of-type).

CSS :first-of-type Pseudo Class example

The :first-of-type selector is often compared to :first-child, but they differ in scope. While :first-child matches an element based on its position among all children regardless of type, :first-of-type matches only if it is the first among siblings of the same element type. Both selectors share the same CSS specificity.

Danger

Starting with Selectors Level 4, the selected element does not strictly require a parent node in the DOM to match.

Version

Selectors Level 3

Selectors Level 4

Syntax

CSS :first-of-type 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>
    <article>
      <p>This is a second article.</p>
    </article>
  </body>
</html>
Try it Yourself »

Browser Compatibility

BrowserVersion
Chrome1.0
Firefox1.0
Safari1.0
Edge12.0
Opera7.0
IE9.0

Practice

Practice

What is the correct definition and use of the :first-of-type CSS pseudo-class?