Pseudo-luokka first-of-type

Pseudo-luokka first-of-type valitsee elementin, joka on vanhemman ensimmäinen määritetyn tyyppinen lapsi. Eli jos kirjoitat h2:first-of-type - löytyy ensimmäinen h2 vanhemmassaan (toisin kuin first-child, joka löytää vain sen h2:n, joka on vanhemman ensimmäinen lapsi).

Syntaksi

cssvalitsija:first-of-type {
  
}

Esimerkki

Etsitään kappale, joka on vanhemman ensimmäinen kappale:

html<div>
  <h2>otsikko</h2>
  <p>kappale</p>
  
  <h2>otsikko</h2>
  <p>kappale</p>
  
  <h2>otsikko</h2>
  <p>kappale</p>
</div>

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

Результат: