Nesting CSS: come funziona e da quali browser è supportato

Matteo Tartero

Data pubblicazione:

Ottobre 2024

Cos’è il nesting in CSS

Il nesting è la traduzione di nidificazione, ed è un metodo di scrittura del codice CSS che permette di inserire delle dichiarazioni di stile degli elementi (selettori, classi, pseudo-classi e id) all’interno della dichiarazione di un altro elemento.

I vantaggi del nesting in CSS

Ci sono vari vantaggi nell’usare il nesting CSS, ad esempio:

Facilità di lettura del codice
Permette di raggruppare gli elementi
Consente di avere un codice più pulito e più snello

Le regole del nesting in CSS

Come detto in precedenza, il nesting permette di inserire delle dichiarazione di stile all’interno di un selettore, senza dover ripere i selettori. Vediamo un esempio.

Iniziamo da una struttura HTML di questo tipo:

<div class="main"> 
  <H1> Hello!</h1>
  <p> I love ice cream!
<div>

Ora diamo uno stile ai nostri elementi. Voglio che il testo all’interno del div con classe main sia rosso, ma che il colore del paragrafo sia blu. In codice CSS classico, dovrei scrivere:

.main{
  color: red;
}

.main p{
  color: blue;
}

In questo caso assegno il colore “red” a tutto il testo presente nella classe main e, tramite il selettore, assegno il colore “blue” al paragrafo presente all’interno nella classe mail.

Con il nesting CSS si può fare la stessa cosa, ma in maniera più facile e veloce da leggere.

.main{
  color:red;
  
  p{
    color: blue;
  }
}

Come si vede nell’esempio, ho inserito il selettore p all’interno del selettore della classe main. In questo modo lo stile verrà applicato solo agli elementi <p> presenti all’interno di main. Se l’avessi scritto all’esterno del selettore main, lo stile sarebbe stato applicato a tutti gli elementi <p> presenti nella pagina.