Pseudoklasse first-of-type

Der Pseudoklasse first-of-type wählt ein Element aus, das das erste Kindelement des Elternelements eines bestimmten Typs ist. Das heißt, wenn man h2:first-of-type schreibt - wird das erste h2 im Elternelement gefunden (im Unterschied zu first-child, das nur das h2 findet, das als erstes im Elternelement steht).

Syntax

cssSelektor:first-of-type {
  
}

Beispiel

Finden wir den Absatz, der der erste Absatz im Elternelement ist:

html<div>
  <h2>Überschrift</h2>
  <p>Absatz</p>
  
  <h2>Überschrift</h2>
  <p>Absatz</p>
  
  <h2>Überschrift</h2>
  <p>Absatz</p>
</div>

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

Результат: