Le pseudo classi CSS - pseudo classi strutturali

Go to the profile of  Jacopo Kahl
Jacopo Kahl
5 min di lettura
Le pseudo classi CSS - pseudo classi strutturali

Le pseudo-classi strutturali si occupano di quegli  elementi basati sulla loro relazione con altri elementi.

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 in tutti i principali browser.

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>

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 elemento paragrafo.

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

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>

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>

first-of-type

La pseudo-classe :first-of-type corrisponde 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>

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>

nth-child

La pseudo-classe :nth-child corrisponde all'n-esimo figlio del suo elemento padre.

p:nth-child(1) {} /* primo */
p:nth-child(2n) {} /* secondo */
p:nth-child(2n+1) {} /* terzo */

Si supponga di avere una serie di elementi <p> e di voler applicare uno stile solo all'n-esimo elemento.

<div>
    <p>Maria Pia</p>
    <p>Mario Rossi</p>
    <p>Luigi Bianchi</p>
    <p>Luisa Verdi</p>
</div>

Se volessimo applicare uno stile specifico al paragrafo contente il nome Mario Rossi potremmo inserire direttamente una classe o un id all'interno di <p>. Con nth-child abbiamo invece la possibilità di indicare il numero preciso dell'elemento su cui vogliamo applicare il nostro stile.

p:nth-child(2) {color: red;} /* verrà applicato lo stile all'n-esimo elemento */

Si possono anche creare dei match tra gli elementi pari e dispari. La corrispondenza dei figli pari e dispari è un'operazione comune. Per semplificare questa selezione possono essere utilizzate anche le parole chiave pari e dispari.

tr:nth-child(even) {} /* righe pari della tabella*/
tr:nth-child(odd) {} /* righe dispari della tabella */

L'argomento di :nth-child  può essere un numero intero, la parola chiave pari o dispari o un'espressione sotto forma di an + b. La parola chiave n può essere anche un contatore che scorre attraverso tutti gli n elementi figlio.

Il contatore può essere negativo, in questo caso l'iterazione va a ritroso. Questa regola può essere usata per selezionare un numero specifico dei primi figli di un elemento genitore.

p:nth-child(-n+3) {} /* primi tre figli */

La matematica e gli argomenti usati per :nth-child sono validi per le prossime tre pseudo-classi, che iniziano tutte con :nth.

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 */

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>

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>

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>

root

La pseudo-classe :root corrisponde all'elemento più in alto nell'albero del documento HTML. Nei documenti HTML, è sempre l'elemento <html>.

:root {} /* elemento radice */

Questa pseudo-classe è utile soprattutto quando si usa CSS con altri linguaggi, come XML, in cui l'elemento radice può variare.

Vuoi approfondire l'argomento? 🤓 + 📚 = 😄

Libro consigliato

Un modo nuovo e più bello per imparare HTML5 e CSS3.

Cos'è il box model
3 min di lettura
I Gradienti in CSS
5 min di lettura
Gestire lo sfondo in CSS
4 min di lettura
Gestire i font con i CSS
3 min di lettura
Proprietà del testo in CSS
4 min di lettura