:first-of-type

Il selettore :first-of-type consente di selezionare, in CSS, la prima occorrenza di un particolare elemento all’interno di un documento HTML. Nella specifica CSS3 è definita come una “pseudo-classe strutturale”, quindi che consente di definire lo stile di un elemento in base alla sua relazione con l’elemento genitore e fratello.

Supponiamo di avere il seguente documento HTML:

<article>
  <h1>Titolo dell'Articolo</h1>
  <p>Questo è il paragrafo introduttivo dell'articolo con il riassunto del contenuto</p>
  <p>Contenuto vero e proprio dell'articolo, si compone di tanti paragrafi e questo è il primo</p>
  <p>Altro paragrafo di contenuto dell'articolo</p>
</article>

Vogliamo in questo esempio rendere il primo paragrafo più evidente, aumentando le dimensioni del testo e rendendolo in grassetto. Invece di assegnare una classe o un id, possiamo utilizzare il selettore :first-of-type per selezionarlo:

p:first-of-type {
  font-size: 150%;
  font-weight: bold;
}

Il comportamento di :first-of-type è molto simile a quello di :nth-child, ma con la differenza di essere meno specifico. Infatti, nell’esempio appena fatto, se avessimo usato p:nth-child(1), non sarebbe stato selezionato nulla dato che il paragrafo non è il primo figlio dell’elemento <article>. Questo significa che :first-of-type può selezionare un particolare tipo di elemento in una particolare disposizione in relazione a fratelli parigrado simili, ma non a tutti i fratelli parigrado.

Supporto dei Browser

Il selettore :first-of-type è stato introdotto con CSS3, questo significa che le versioni più vecchie dei browser non supportano questo pseudo-elemento.