Il :first-of-typeselettore in CSS ti consente di scegliere come target la prima occorrenza di un elemento all'interno del suo contenitore. È definito nella specifica CSS Selectors Level 3 come una "pseudo-classe strutturale", il che significa che viene utilizzato per definire lo stile del contenuto in base alla sua relazione con il contenuto padre e fratello.
Supponiamo di avere un articolo con un titolo e diversi paragrafi:
Paragraph 1.
Paragraph 2.
Paragraph 3.
Vogliamo allargare il primo paragrafo, come una sorta di “lede” o paragrafo introduttivo. Invece di assegnargli una classe, possiamo usarlo :first-of-typeper selezionarlo:
p:first-of-type ( font-size: 1.25em; )L'utilizzo :first-of-typeè molto simile :nth-childma con una differenza fondamentale: è meno specifico. Nell'esempio sopra, se lo avessimo usato p:nth-child(1), non sarebbe successo nulla perché il paragrafo non è il primo figlio del suo genitore (il ). Questo rivela il potere di :first-of-type: prende di mira un particolare tipo di elemento in una disposizione particolare in relazione a fratelli simili, non tutti i fratelli.
L'esempio più completo di seguito illustrato l'utilizzo di :first-of-typee un relativo selettore pseudo-classe, :last-of-type.
Supporto browser
| Cromo | Safari | Firefox | musica lirica | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Lavori | 3.2+ | Lavori | 9.5+ | 9+ | Lavori | Lavori |
:first-of-typeè stato introdotto nel modulo 3 dei selettori CSS, il che significa che le vecchie versioni dei browser non lo supportano. Tuttavia, il supporto del browser moderno è impeccabile ei nuovi pseudo-selettori sono ampiamente utilizzati negli ambienti di produzione. Se è necessario il supporto di browser meno recenti, utilizzare polyfill per IE o utilizzare questi selettori in modi non critici, come consigliato dal miglioramento progressivo.