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 :
2789
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.
MENSAJE
OPERACIÓN EJECUTADA
Utilizziamo i nostri cookie e quelli di terzi per migliorare i nostri servizi, compilare informazioni statistiche e analizzare le vostre abitudini di navigazione. Questo ci permette di personalizzare i contenuti che offriamo e di mostrarvi le pubblicità relative alle vostre preferenze. Cliccando su "Accetta tutto" acconsentite alla memorizzazione dei cookie sul vostro dispositivo per migliorare la navigazione del sito web, analizzare il traffico e assistere le nostre attività di marketing. Potete anche selezionare "Solo cookies di sistema" per accettare solo i cookies necessari al funzionamento del sito web, oppure potete selezionare i cookies che desiderate attivare cliccando su "Impostazioni".
Tradotto con www.DeepL.com/Translator (versione gratuita)" o "Rifiuta".
Questi cookie sono necessari per il funzionamento del sito Web e non possono essere disattivati sui nostri sistemi. Generalmente vengono impostate solo in risposta alle vostre azioni di richiesta di servizi, come l'impostazione delle vostre preferenze sulla privacy, l'accesso o la compilazione di moduli. È possibile impostare il browser in modo da bloccare o avvisare l'utente di questi cookie, ma alcune aree del sito non funzioneranno. Questi cookie non memorizzano alcuna informazione di identificazione personale
Performance Cookies
Questi cookie ci permettono di contare le visite e le fonti di traffico in modo da poter valutare le prestazioni del nostro sito e migliorarle. Ci aiutano a sapere quali sono le pagine più o meno visitate e come i visitatori navigano nel sito. Tutte le informazioni raccolte da questi cookie sono aggregate e quindi anonime. Se non consentite l'utilizzo di questi cookie, non sapremo quando avete visitato il nostro sito e non saremo in grado di valutare se ha funzionato correttamente
Cookies Funzionali
Questi cookie consentono al sito Web di fornire una migliore funzionalità e personalizzazione. Essi possono essere impostati dalla nostra azienda o da fornitori esterni di cui abbiamo aggiunto i servizi alle nostre pagine. Se non si consente l'utilizzo di questi cookie, alcuni di questi servizi potrebbero non funzionare correttamente
Cookies Pubblicitari
Questi cookie possono essere impostati attraverso il nostro sito dai nostri partner pubblicitari. Possono essere utilizzati da queste aziende per profilare i vostri interessi e visualizzare annunci pertinenti su altri siti. Non memorizzano direttamente le informazioni personali, ma si basano sull'identificazione univoca del browser e del dispositivo Internet. Se non si consente l'utilizzo di questi cookie, si vedrà una pubblicità meno mirata