Annidamento

L'annidamento delle regole di stile CSS può rendere i fogli di stile più organizzati, più facili da leggere e più gestibili.

Panoramica

Ora che hai imparato a conoscere i selettori, probabilmente ti starai chiedendo come organizzarli meglio nei tuoi fogli di stile. Immagina di applicare stili agli elementi all'interno di una sezione "funzionalità" del tuo sito. Con l'annidamento, puoi raggruppare questi stili all'interno della regola .feature in questo modo:

.feature {
  button {
    color: blue;
  }

  .link {
    color: red;
  }

  .text {
    font-size: 1.3em;
  }
}

Sarebbe come scrivere ogni stile separatamente:

.feature button {
  color: blue;
}

.feature .link {
   color: red;
}

.feature .text {
   font-size: 1.3em;
}

L'annidamento può essere profondo quanto necessario.

.feature {
  .heading {
    color: blue;

    a {
      color: green;
    }
  }
}

Raggruppamento e creazione di relazioni

L'annidamento consente di raggruppare e stabilire relazioni tra le regole di stile in modo più conciso.

Per impostazione predefinita, la regola nidificata sarà correlata alla regola esterna come combinatore discendente. Utilizza i selettori nelle regole nidificate per modificare le relazioni.

/* targets headings that are siblings of the .feature element and come immediately after it */
.feature {
  + .heading {
    color: blue;
  }

/* targets all paragraphs that are direct children of the .feature element */
  > p {
    font-size: 1.3em;
  }
}

Definisci relazioni esplicite con il selettore &

Puoi anche utilizzare il selettore & per essere più esplicito quando nidifichi le regole di stile. Pensa a & come a un simbolo che rappresenta il selettore principale.

.feature {
 & button {
    color: blue;
  }
}

Ciò equivale a scrivere gli stili in questo modo:

.feature button {
  color: blue;
}

Quando è obbligatorio specificare il campo &

Senza &, i selettori nidificati saranno selettori discendenti del selettore principale. Per formare selettori composti, è & obbligatorio.

.feature {
  &:last-child {
    /* Selects the .feature element that is the :last-child, equivalent to .feature:last-child */
  }
   
  & :last-child {
    /* Selects the :last-child inside of a .feature element, equivalent to .feature :last-child */
  }

  &.highlight {
    /* Selects .feature elements that also have a .highlight class, equivalent to .feature.highlight */
  }

  & .highlight {
     /* Selects elements inside of the .feature element with the class .highlight, equivalent to .feature .highlight */
  }
}

Puoi anche modificare il contesto e posizionare il selettore & alla fine del selettore figlio o su entrambi i lati.

/* Targets buttons with an adjacent sibling button */
button {
  & + & {
    /* … */
  }
}

img {
  .my-component & {
    /* styles for images inside of `.my-component` ... */
  }
}

Nell'ultimo esempio, aggiungiamo stili per le immagini all'interno di un elemento con la classe .my-component. Questa opzione può essere utile se stai lavorando a un progetto in cui non puoi aggiungere un class o un id a un elemento.

Nesting e specificità

Come :is(), il selettore di nidificazione prende la specificità del selettore con la specificità più elevata nell'elenco dei selettori del genitore.

#main-header,
.intro {
  & a {
    color: green;
  }
}

.intro a {
  color: blue;
}

La prima regola ha come target tutti i link all'interno degli elementi #main-header e .intro, a cui viene assegnato un colore verde.

La seconda regola tenta di ignorare questa impostazione per rendere blu i link all'interno dell'elemento .intro.

Possiamo capire perché non funziona se esaminiamo la specificità di ogni regola.

/* equivalent to :is(#main-header, .intro) a with a specificity of (1, 0, 1) */
#main-header,
.intro {
  & a {
    color: green;
  }
}

/* lower specificity of (0, 1, 1) */
.intro a {
  color: blue;
}

Poiché la prima regola ha un id nel suo elenco di selettori e le regole nidificate prendono la specificità del selettore con la specificità più elevata, ha una specificità maggiore rispetto alla seconda regola. I link sono verdi anche per gli elementi a che non si trovano all'interno di un elemento con il selettore #main-header.

Nidificazione non valida

Analogamente a :is(), il selettore di nidificazione non può rappresentare pseudo-elementi.

blockquote, blockquote::before, blockquote::after {
  color: navy;

  & {
    border: 1px solid navy;
  }
}

Ti aspetteresti che sia blockquote sia i suoi pseudo-elementi abbiano testo e bordi colorati navy, ma non è così. Poiché il selettore & non può rappresentare gli pseudo-elementi, gli stili del bordo nidificati verranno applicati solo alla citazione.

Quando crei selettori composti utilizzando & e selettori di tipo, il selettore di tipo deve essere il primo senza spazi bianchi tra i due.

/* valid css nesting */
.feature {
  p& {
    font-weight: bold;
  }
}

/* invalid css nesting */
.feature {
  &p {
    font-weight: bold;
  }
}

Questa regola consente l'annidamento CSS in combinazione con strumenti di pre-elaborazione come Sass. In Sass, la scrittura di &p aggiunge il selettore principale al selettore di tipo nidificato e il risultato è .featurep.

Regole at-rule nidificate

Anche le regole condizionali dei gruppi CSS come @container, @media, @supports e @layer possono essere nidificate.

.feature {
  @media (min-width: 40em) {
    /* ... */
  }

  @container (inline-size > 900px) {
    /* ... */
  }
}

.feature {
  @supports (display: grid) {
    /* ... */
  }
}

.feature {
  @layer component {
    h2 {
      /* ... */
    }
  }
}

Verifica la tua comprensione