W3cubDocs

/CSS

:first-of-type

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

Try it

Syntax

:first-of-type {
  /* ... */
}

Examples

Styling the first paragraph

HTML

<h2>Heading</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>

CSS

p:first-of-type {
  color: red;
  font-style: italic;
}

Result

Nested elements

This example shows how nested elements can also be targeted. Note that the universal selector (*) is implied when no type selector is written.

HTML

<article>
  <div>This `div` is first!</div>
  <div>This <span>nested `span` is first</span>!</div>
  <div>
    This <em>nested `em` is first</em>, but this <em>nested `em` is last</em>!
  </div>
  <div>This <span>nested `span` gets styled</span>!</div>
  <p>This `p` qualifies!</p>
  <div>This is the final `div`.</div>
</article>

CSS

article :first-of-type {
  background-color: pink;
}

Result

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
:first-of-type 1
12Before Edge 16, Microsoft Edge treats all unknown elements (such as custom elements) as the same element type.
3.5
9Internet Explorer treats all unknown elements (such as custom elements) as the same element type.
9.5 3.1 2 18 4 10.1 2 1.0

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/:first-of-type