CSS-nästlingsselektorer (&)

Definition och användning

CSS-nästling (&) Selektorer används för att tillämpa stil på ett element i en annan elements kontext.

Nästling minskar behovet av att upprepa selektorer för relaterade element.

Exempel

Exempel 1

Innan du nästlar måste du uttryckligen deklarera varje selektor, som visas nedan:

.box {
  border: 2px solid green;
  background-color: beige;
  font-family: monospace;
  font-size: 20px;
}
.box > a {
  color: grön;
}
.box > a:hover {
  color: vit;
  background-color: rödbetssalmon;
}

Prova själv

Exempel 2

Efter att ha nästlat, förlängs selektorn och relaterade stilregler grupperas i föräldreguiden:

.box {
  border: 2px solid green;
  background-color: beige;
  font-family: monospace;
  font-size: 20px;
  & > a {
    color: grön;
    &:hover {
      color: vit;
      background-color: rödbetssalmon;
    }
  }
}

Prova själv

Tips:Om du vill ta bort .box-stilen från ditt projekt, kan du ta bort hela gruppen utan att söka efter relaterade selektorer.

CSS-syntax

föräldregerule {
  css-deklarationer;
  & barnregel {
    css-deklarationer;  } 
}

Tekniska detaljer

Browserversioner