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.
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.
by
Janeth Kent Date:
11-04-2013
visite :
3283
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.
