Pseudoklasse first-of-type

De pseudoklasse first-of-type selecteert een element dat het eerste kind is van zijn ouder van het opgegeven type. Dat wil zeggen, als je h2:first-of-type schrijft, wordt de eerste h2 in de ouder gevonden (in tegenstelling tot first-child, dat alleen die h2 vindt die het allereerste kind in de ouder is).

Syntaxis

cssselector:first-of-type {
  
}

Voorbeeld

Laten we de alinea vinden die de eerste alinea in de ouder is:

html<div>
  <h2>titel</h2>
  <p>alinea</p>
  
  <h2>titel</h2>
  <p>alinea</p>
  
  <h2>titel</h2>
  <p>alinea</p>
</div>

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

Результат: