MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

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;
}

Note: As originally defined, the selected element had to have a parent. Beginning with Selectors Level 4, this is no longer required.

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

Specification Status Comment
Selectors Level 4
The definition of ':first-of-type' in that specification.
Working Draft Matching elements are not required to have a parent.
Selectors Level 3
The definition of ':first-of-type' in that specification.
Recommendation Initial definition.

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 (Yes) 3.5 (1.9.1) 9.0 9.5 3.2
Feature Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 2.1 (Yes) 1.0 (1.9.1) 9.0 10.0 3.2

See also

Document Tags and Contributors

 Last updated by: chrisdavidmills,