Pseudoclase first-of-type

La pseudoclase first-of-type selecciona un elemento que es el primer elemento secundario de un tipo específico del elemento padre. Es decir, si escribes h2:first-of-type - encontrará el primer h2 dentro del elemento padre (a diferencia de first-child, que solo encontrará aquel h2 que sea el primer elemento secundario del elemento padre).

Sintaxis

cssselector:first-of-type {
  
}

Ejemplo

Encontremos el párrafo que es el primer párrafo en el elemento padre:

html<div>
  <h2>título</h2>
  <p>párrafo</p>
  
  <h2>título</h2>
  <p>párrafo</p>
  
  <h2>título</h2>
  <p>párrafo</p>
</div>

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

Результат: