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.