Selettori CSS: Pseudo Classi Strutturali Parte 2

Analisi progettuale delle pseudo-classi CSS

by Silvia Mazzetta Date: 02-05-2020 css css3 webdesign

Le pseudo-classi strutturali riguardano tutti quegli  elementi basati sulla loro relazione con altri elementi del DOM.

CSS 2 includeva solo una pseudo-classe strutturale in questa categoria, :first-child, mentre CSS 3 ne ha introdotti di nuove.

Le pseudo-classi strutturali di CSS 3 sono supportate da tutti i principali browser.

 

E:root

 

La pseudo-classe :root seleziona l'elemento radice della pagina. In HTML l'elemento radice è sempre l'elemento HTML; ció significa che le seguenti righe di codice sono quasi equivalenti, anche se la pseudo-classe è più specifica:

html {background-color: red; color: white} 
:root {background-color: red; color: white}
 

E:first-child

 

La pseudo-classe :first-child corrisponde al primo figlio dell'elemento selezionato.

p:first-child {}   

Nel seguente esempio, questa regola si applica al primo elemento figlio del paragrafo.

<p><span>Primo figlio dell'elemento</span>  
<span>altro testo</span>  
</p>
 

E: last-child

 

La pseudo-classe :last-child rappresenta l'ultimo figlio dell'elemento selezionato.

p:last-child {}   

Questa regola ha come target l'ultimo figlio del seguente del paragrafo.

<p><span>altro testo</span>  
<span>Ultimo figlio dell'elemento</span>  </p>
 

E: only-child

 

La pseudo-classe :only-child corrisponde ad un elemento il cui oggetto padre non ha figli.

p:only-child {} /* elemento figlio unico */  

Nell'esempio che segue notiamo che questa regola viene applicata al primo elemento perché è l'unico figlio del paragrafo. Il secondo paragrafo ha due figli, quindi nessuno di loro è interessato da questa regola.

<p><strong>Figlio unico</strong></p>  
<p><strong>altro testo</strong><em>altro testo</em></p>
 

E: only-of-type

 

Il funzionamento di :only-of-type è simile a quello di :only-child. Come suggerisce il nome, il selettore :only-of-type corrisponde all'elemento selezionato solo se il padre contiene elementi figli di diverso tipo.

p:only-of-type {} /* valido solo per l'elemento <p> */  

Il seguente paragrafo è interessato da questa regola perché è l'unico elemento paragrafo del suo genitore.

<div><h1>altro testo</h1>  
<p>Testo only-of-type</p>  
</div>
 

E: first-of-type

 

La pseudo-classe :first-of-type si riferisce al primo elemento figlio di un elemento selezionato.

p:first-of-type {} /* il primo elemento di <p> */  

Nel seguente esempio corrisponde al primo elemento <p>:

<div><h1>Titolo</h1>  
<p>testo first-of-type</p>  
<p>altro testo</p>  
</div>
 

E: last-of-type

 

La pseudo-classe :last-of-type seleziona il primo elemento che è l'ultimo figlio del suo tipo.

strong:last-of-type {} /* ultimo elemento <strong> */  

Questa regola si applica all'ultimo <strong> tra gli elementi simili.

<div>  
<strong>altro testo</strong>  
<strong>elemento selezionato last-of-type</strong>  
</div>
 

E:nth-child()

 

La pseudo-classe :nth-child() é senza dubbio, tra le pseudo-classi di nuova generazione, la più interessante: identifica l'elemento E che è l'n-esimo figlio del suo elemento padre. L'argomento posto all'interno delle parentesi, può essere un numero, una parola chiave o una formula.

I suoi utilizzi sono innumerevoli. Vediamo nel dettaglio. Supponiamo di dover costruire una semplice 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
 

Il nostro scopo é dover selezionare ed evidenziare una solo riga. Ricorrendo al vecchio metodo, avremmo semplicemente apposto una classe alla riga in questione, creando una regola ad hoc. Con la pseudo-classe E:nth-child() tutto si semplifica.

Basta infatti scegliere il numero della riga da evidenziare e apporre una regola di stile, come da esempio:

tr:nth-child(2) td {background-color: #E7E7E7;}

Abbiamo qui evidenziato la riga 2 della nostra tabella, assegnadole uno sfondo di un colore differente.

Nel caso avessimo bisogno di utilizzare diversi colori di background a righe alternate (la 1 e la 3 per esempio), possiamo utilizzare queste righe di codice

tr td {background-color: #DBEEF4} tr:nth-child(odd) td {background-color: #F5F5F5;}

Sostituendo la parola even a la parola odd, si selezionano le righe pari (2 e 4)

La flessibilitá della pseudo-classe :nth-child() permette di inserire formule per creare dei pattern piuttosto complessi.

Partendo dagli esempi prima visti, possiamo infatti contrarre la formula, ottentendo un background diverso ogni 2 celle

tr:nth-child(2n+1) td {background-color: #E2E2E2;}

Entriamo nel dettaglio della formula an + b: a e b sono dei numeri interi. Con tale pattern selezioniamo l'elemento figlio che si trova alla distanza an+b-1 dal primo elemento figlio. Il valore di b indica la distanza di partenza, ovvero dopo quanti elementi bisogna far partire la formula.

Cerchiamo di capire meglio il concetto, che fin'ora potrebbe sembrare piuttosto ostico.

tr:nth-child(3n+2) td {background-color: #E5E5E5;}

Questa formula assegna un background di colore differente ogni 3 righe della tabella, iniziando a contare dalla riga numero 2.

Se ne deduce naturalmente che, incrementando il valore di a aumenti lo spazio tra gli elementi selezionati e contestualmente, incrementando il valore di b, aumenti lo spazio iniziale della selezione.

Se il valore di a è uguale a 1 o il valore b é uguale a 0, gli stessi valori possono essere omessi.

CASI PARTICOLARI

queste sono identiche

tr:nth-child(2n)
tr:nth-child(even)

queste sono identiche

tr:nth-child(2n+1)
tr:nth-child(odd)

queste sono identiche

tr:nth-child(0n+5)
tr:nth-child(5)

queste sono identiche

tr:nth-child(1n+0)
tr:nth-child(n+0)
tr:nth-child(n)

queste sono simili ma con una specificitá piú bassa

/* le seguenti regole sono del tutto identiche */
tr:nth-child(10n-1) /* selezionerà l'elemento 9, 19, 29, ecc */
tr:nth-child(10n+9) /* selezionerà l'elemento 9, 19, 29, ecc */

 

E: nth-of-type

 

La pseudo-classe :nth-of-type (an+b) corrisponde al b-esimo elemento di un elemento selezionato tra un gruppo di altri elementi dello stesso tipo, divisi in gruppi.

p:nth-of-type(2) {} /* secondo paragrafo del gruppo */  
p:nth-of-type(2n) {} /* paragrafo pari del gruppo */  
p:nth-of-type(2n+1) {} /* paragrafo dispari del gruppo */  

Il comportamento di questa pseudo-classe è simile a :nth-child, ma corrisponde anche a elementi dello stesso tipo dell'elemento specificato, anziché ai figli corrispondenti all'elemento specificato.

<div>
<em>testo</em><p>pari</p><p>secondo e dispari</p><p>pari</p>  
</div>  

Simile alla pseudo-classe :nth, le parole chiavi pari e dispari possono essere usate per creare corrispondenze tra elementi dello stesso tipo.

p:nth-of-type(even) {} /* elemento dispari dello stesso tipo */  
p:nth-of-type(odd) {} /* elemento pari dello stesso tipo */
 

E: nth-last-of-type

 

La pseudo-classe :nth-last-of-type(an + b) corrisponde all'elemento del tipo selezionato che ha an + b elementi dello stesso tipo dopo di esso. Questo comportamento è equivalente alla pseudo-classe :nth-of-type, tranne
per il fatto che si parte a contare gli elementi dal basso verso l'alto.

p:nth-last-of-type(3) {} /* terzo e ultimo paragrafo */  
p:nth-last-of-type(-n+2) {} /* ultimi due paragrafi */  

Possiamo vedere le regole applicate al seguente esempio. L'elemento <em> non è conteggiato perché non è del tipo specificato, in questo caso il paragrafo.

<div>
<p>terzo e ultimo</p> <p>ultimi due</p>      
<p>ultimi due</p><em>testo non interessato da modifica</em>  
</div>
 

E: nth-last-child

 

La pseudo-classe :nth-last-child(an + b) rappresenta qualsiasi elemento che
ha un fratello an + b dopo di esso. Il suo comportamento è lo stesso di :nth-child, tranne per il fatto che inizia con l'elemento inferiore anziché con quello superiore.

p:nth-last-child(3) {} /* terzo e ultimo figlio */  p:nth-last-child(-n+2) {} /* ultimi due figli */  

Queste regole vengono applicate agli elementi figli nel seguente esempio:

<div>      
<p>terzo e ultimo</p>      
<p>ultimi due</p>      
<p>ultimi due</p>  
</div>
 

E: empty

 

La pseudo-classe :empty corrisponde agli elementi selezionati che non hanno contenuto.

p:empty {} /* paragrafi vuoti */  

Un elemento è considerato vuoto se non ha elementi figlio, del testo o spazi bianchi ad eccezione dei commenti al codice.

La regola precedente si applica ai seguenti due paragrafi:

<p></p> <p><!-- commento --></p>

 
by Silvia Mazzetta Date: 02-05-2020 css css3 webdesign visite : 3522  
 
Silvia Mazzetta

Silvia Mazzetta

Web Developer, Blogger, Creative Thinker, Social media enthusiast, Italian expat in Spain, mom of little 9 years old geek, founder of  @manoweb. A strong conceptual and creative thinker who has a keen interest in all things relate to the Internet. A technically savvy web developer, who has multiple  years of website design expertise behind her.  She turns conceptual ideas into highly creative visual digital products. 

 
 
 

Articoli correlati

Nuove unità grafiche della finestra - CSS

'Intercop 2022" è un progetto annunciato da Google, Microsoft, Apple e Mozzilla Foundation per far sì che tutti i browser offrano la stessa esperienza web. Il progetto ha 15 aree di…

Come funziona il GAP in CSS Grid e flexbox

Forse conoscete già la proprietà CSS gap. Non è esattamente una novità, ma l'anno scorso ha acquisito un'importante capacità: ora funziona in Flexbox oltre che in CSS Grid. Questo, e…

Introduzione alle CSS Container Queries

Il responsive web design è una componente essenziale dello sviluppo web. Come sviluppatori front-end, dobbiamo preoccuparci continuamente della moltitudine di nuove risoluzioni e dispositivi. Va da se che creare una versione…

Flexbox, breve guida pratica

In questo articolo impareremo a gestire gli elementi del nostro sito web in modo più efficiente ed efficace, grazie alla proprietà Flexbox. Ma attenzione, non stiamo parlando di una semplice proprietà…

Paesaggi Parallax costruiti interamente con CSS e HTML

Il CSS3 ha messo finalmente fine alle nostre frustrazioni: con delle semplici proprietà si aprono infatti infinite soluzioni. Una tra tante, la possibilità di inserire uno sfondo animato in una pagina…

9 Utili Librerie CSS per il Disegno Web

I componenti perduti di bootstrap, un complemento che sicuramente non dovrete mai farvi mancare!  Jasny Bootstrap E se il vostro framework CSS parlasse? Ecco a voi un nuovo Framework Semantico.Un…

Introduzione all'animazione dei poligoni con css

Per lungo tempo noi sviluppatori web, abbiamo dovuto rassegnarci alle strutture geometriche fondamentali: i blocchi rettangolari. Cosí, quando è stato introdoto il clipping nei css, abbiamo gioito. Dite la verità... Ma cos'è…

CSS: la funzione Calc()

Nella progettazione di un sito web responsive, dobbiamo tener conto della ormai grande varietà di dispositivi sui quali sarà visualizzato il nostro lavoro e delle rispettive variazioni di risoluzioni alle…

Realizzare banner animati con CSS3

Avete dei clienti esigenti che "ancora" vi chiedono movimentati, sbrilluccicanti banner in flash? Se siete stanchi di rispondere che ormai il flash è andato in pensione potete proporre una soluzione…

I 10 migliori generatori di gradienti CSS

Difficilmente si potrà creare il gradiente perfetto affidandoci alla pura e semplice scrittura di codice CSS. Avere un riferimento visivo in fase di creazione è fondamentale. Ecco perché tra i tool…

15 effetti di testo avanzati con CSS3

Le nuove proprietà CSS3 sono senza dubbio un grande vantaggio per poter modellare a piacimento tutti gli elementi di una pagina web senza dover ricorrere all'utilizzo del codice javascript. Una delle…

15 esempi di trasformazioni 3D con CSS

Lo sviluppo e l'evoluzione dei browser web come Safari, Chrome e Firefox ha dato agli sviluppatori web ed ai web designers, l'opportunitá di sbizzarrirsi con  la creazione di effetti bellissimi,…

Clicky