CSS  »  Articoli  »  CSS 3 

E:first-of-type

Questa pseudo-classe seleziona il primo elemento E che è il primo figlio del suo tipo. Concettualmente essa coincide all'uso di :nth-of-type(1).

Dato il codice utilizzato negli esempi precedenti, la seguente riga:

div p:first-of-type { background-color: yellow; }

selezionerà solo il primo paragrafo.

Esempio.

E:last-of-type

La pseudo-classe seleziona il primo elemento E che è l'ultimo figlio del suo tipo. Concettualmente essa coincide all'uso di :nth-last-of-type(1).

Dato il codice utilizzato negli esempi precedenti, la seguente riga:

div p:last-of-type { background-color: yellow; }

selezionerà solo l'ultimo paragrafo.

Esempio.

E:only-of-type

Il funzionamento è del tutto simile a E:only-child con la sola differenza che l'oggetto padre può contenere altri figli, purchè di diverso tipo.

Quindi, dato un codice come il seguente:

<div>
    <p>Lorem ipsum dolor sit amet.</p>
    <ul><li>List item 1</li><li>List item 2 </li></ul>
</div>
<div>
    <p>Lorem ipsum dolor sit amet.</p>
    <p>Lorem ipsum dolor sit amet.</p>
    <ul><li>List item 1</li><li>List item 2 </li></ul>
<div>

e questo codice CSS:

div p:only-of-type { background: yellow; }

verrà selezionato solo il primo paragrafo del primo contenitore perché, nel secondo contenitore, sono presenti due paragrafi e non solo uno.

Esempio.

E:empty

Questa pseudo-classe identifica ogni elemento E che non contiene figli. E:empty include anche i nodi di testo quindi, un semplice paragrafo che contiene del testo al suo interno non corrisponderà.

Data la regola CSS:

p:empty { background-color: yellow; }

dei seguenti paragrafi, solo il primo corrisponderà:

<p></p>
<p><span></span></p>
<p>Lorem ipsum</p>

Esempio.

Compatibilità con i browser

Nella seguente tabella ho raccolto la compatibilità di ogni pseudo-classe con i browser.

Figura 1 - Supporto delle pseudo-classi strutturali nei browser

Dato che il supporto da parte di Internet Explorer è pressoché nullo per ogni versione ho inserito un'unica voce IE che le comprende tutte. Le cose però cambieranno nel momento in cui uscirà IE9: Microsoft ha infatti annunciato che le pseudo-classi strutturali saranno supportate sulla prossima versione del suo browser. Notiamo poi che le ultime versioni di Firefox, Chrome e Opera supportano tutte le pseudo-classi anche se alcuni browser ancora fanno qualche errore nell'interpretazione. Fino alla versione 3 di Firefox, invece, alcune pseudo-classi non sono supportate.

Tutti gli esempi visti nell'articolo sono disponibili per il download.

Altri articoli

Altre guide

Altre newsletter