The first-of-type pseudo-class

The first-of-type pseudo-class selects the element that is the first child of a parent of a given type. That is, if you write h2:first-of-type - the first h2 in the parent will be found (unlike first-child, which will find only the h2 that is the very first in the parent).

Syntax

cssselector:first-of-type {
  
}

Example

Let's find the paragraph that is the first paragraph in the parent:

html<div>
  <h2>header</h2>
  <p>paragraph</p>
  
  <h2>header</h2>
  <p>paragraph</p>
  
  <h2>header</h2>
  <p>paragraph</p>
</div>

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

Результат: