:first-of-type

The :first-of-type CSS pseudo-class represents the first element of its type among a group of sibling elements.

/* Selects the first <p> to appear inside a parent element
   regardless of its position inside the siblings */
p:first-of-type {
  color: red;
}

Syntax

:first-of-type

Examples

Example 1: Simple first paragraph

Let's consider the following HTML:

<h2>Heading</h2>
<p>Paragraph</p>
<p>Paragraph</p>

And the following CSS:

p:first-of-type {
  color: red;
}

This gives the following result — the first paragraph only is colored red, as it is the first element of type paragraph to appear inside the body:

Example 2: Assumed universal selector

This example shows how the universal selector is assumed when no simple selector is written.

First, some HTML:

<div>
  <span>This `span` is first!</span>
  <span>But this `span` isn't.</span>
  <span>This <em>nested `em` is</em>!</span>
  <span>And so is this <span>nested `span`</span>!</span>
  <b>This `b` qualifies!</b>
  <span>This final `span` does not.</span>
</div>

Now, the CSS:

div :first-of-type {
  background-color: lime;
}

The result looks like this:

Specifications

Browser compatibility

See also

• :first-child
• :last-of-type
• :nth-of-type