Pseudoclasse first-of-type

A pseudoclasse first-of-type seleciona um elemento que é o primeiro descendente do tipo especificado no elemento pai. Ou seja, se você escrever h2:first-of-type - será encontrado o primeiro h2 no pai (em contraste com first-child, que encontrará apenas o h2 que está em primeiro lugar no elemento pai).

Sintaxe

cssseletor:first-of-type {
  
}

Exemplo

Vamos encontrar o parágrafo que é o primeiro parágrafo no elemento pai:

html<div>
  <h2>título</h2>
  <p>parágrafo</p>
  
  <h2>título</h2>
  <p>parágrafo</p>
  
  <h2>título</h2>
  <p>parágrafo</p>
</div>

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

Результат: