Selettori CSS: Pseudo Classi Strutturali Parte 3

Analisi progettuale delle pseudo-classi CSS

E:nth-last-child()

La pseudo classe E:nth-last-child() ha un funzionamento simile per non dire identico a E:nth-last-child(n). E:nth-last-child() identifica l'elemento E che è l'n-esimo figlio del suo elemento padre partendo dall'ultimo fratello di E.

Partendo sempre dalla nostra tabella:

Item 1	Item 2	Item 3
Element 1	Element 2	Element 3
Element 4	Element 5	Element 6
Element 7	Element 8	Element 9
Element 10	Element 11	Element 12
Element 13	Element 14	Element 15

Un codice come questo:

tr:nth-last-child(2) td { background-color: yellow}

evidenzierà la seconda riga a partire dall'ultimo elemento fratello.

E:last-child

E:last-child seleziona l'elemento E che è l'ultimo figlio del suo elemento padre. Prendendo sempre come esempio la nostra tabella, la seguente regola CSS:

tr:last-child td {background-color: yellow}

evidenzia l'ultima riga della tabella.

E:only-child

Questa pseudo-classe identifica un elemento 'E' il cui genitore non ha altri figli.

Proviamo ad utilizzare la seguente regola CSS:

p span:only-child {background-color: red}

sul codice html:

<p>Lorem ipsum <span>dolor</span> sit amet.</p>
<p>Lorem ipsum <span>dolor</span> sit <span>amet</span>.</p>

Come potete notate lo span del primo paragrafo avrá uno sfondo rosso, in quanto unico figlio del primo 'p'.

E:nth-of-type()

E:nth-of-type() identifica ogni elemento E che è l'n-esimo fratello d elsuo tipo all'interno del DOM.

Ovvero: se un elemento ha differenti figli di tipo diverso con E:nth-of-type(), modifichiamo solo gli elementi del tipo di cui abbiamo bisogno.

per farvi capire meglio, prendiamo un semplice 'div' come esempio. Sappiamo que questo puó contentere diversi tipi di elementi, tutti appartententi al medesimo livello. Nel caso volessimo lavorare solo sugli elementi ti tipo paragrafo, 'p', distanziati ad esempio di 2, possiamo utilizzare la formula:

div p:nth-of-type(2n) {background-color: yellow}

Questa pseudo-classe può contenere altre formule, pertanto il funzionamento è del tutto simile a nth-child().

E:nth-last-of-type()

Tale classe é simile alla precedente, con la differenza che si inizia a contare dall'ultimo elemento, pertanto per selezionare il penultimo elemento di un paragrafo, 'p':

div p:nth-last-of-type(2) {background-color: yellow}

E:first-of-type

Anche questa pseudo-classe é molto simile ad una che abbiamo visto in precedenza :nth-of-type(1). Per selezionare il primo paragrafo, utilizzeremo:

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

E:last-of-type

Coincide con :nth-last-of-type(1)

Per selezionare l'ultimo paragrafo:

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

E:only-of-type

Identico a E:only-child, con l'eccezione che l'elemento padre puó contenere dei figli, purqué di tipo diverso

Prendendo come esempio un codice HTML con due contenitori, 'div' il primo con un solo 'p', il secondo con 2, andiamo a selezionare il primo paragrafo del primo 'div'

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

E:empty

Identifica ogni elemento che non ha figli, includendo anche in nodi di testo.

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN AND DEVELOPMENT.