Selettore annidato CSS (&)

Definizione e uso

CSS Annidamento (&) Selettore utilizzato per applicare uno stile a un elemento in un contesto di altro elemento.

L'annidamento riduce la necessità di ripetere i selettori per gli elementi correlati.

Esempio

Esempio 1

Prima dell'annidamento, devi dichiarare esplicitamente ogni selettore separatamente, come mostrato di seguito:

.box {
  border: 2px solid green;
  background-color: beige;
  font-family: monospace;
  font-size: 20px;
}
.box > a {
  color: green;
}
.box > a:hover {
  color: white;
  background-color: salmon;
}

Provalo tu stesso

Esempio 2

Dopo l'annidamento, il selettore viene prolungato e le regole di stile correlate vengono raggruppate all'interno della regola genitore:

.box {
  border: 2px solid green;
  background-color: beige;
  font-family: monospace;
  font-size: 20px;
  & > a {
    color: green;
    &:hover {
      color: white;
      background-color: salmon;
    }
  }
}

Provalo tu stesso

Suggerimento:Se illo stile .box del esempio deve essere rimosso dal tuo progetto, puoi rimuovere l'intero gruppo senza cercare i selettori correlati.

Sintassi CSS

parentrule {
  declarazioni CSS;
  & childrule {
    declarazioni CSS;  } 
}

Dettagli tecnici

Supporto del browser