Pseudoklassen first-of-type

Pseudoklassen first-of-type väljer ett element som är det första barnet till en förälder av en specifik typ. Det betyder att om du skriver h2:first-of-type - så hittas den första h2:n i föräldern (till skillnad från first-child, som bara hittar den h2 som är det allra första barnet i föräldern).

Syntax

cssselektor:first-of-type {
  
}

Exempel

Låt oss hitta ett stycke som är det första stycket i föräldern:

html<div>
  <h2>rubrik</h2>
  <p>stycke</p>
  
  <h2>rubrik</h2>
  <p>stycke</p>
  
  <h2>rubrik</h2>
  <p>stycke</p>
</div>

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

Результат: