CSS Nesting Selektorer (&)

Definering og brug

CSS Nesting (&) Selektorer bruges til at anvende stil til et element i konteksten af et andet element.

Nesting reducerer behovet for at gentage selektorer for relaterede elementer.

Eksempel

Eksempel 1

Før at nævne, skal du udtrykkeligt deklarere hver selektor, som vist herunder:

.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;
}

Prøv det selv

Eksempel 2

Efter at have nævnt, forlænges selektoren, og de relevante stilregler grupperes i den overordnede regel:

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

Prøv det selv

Tip:Hvis stilen for .box i eksemplet skal fjernes fra dit projekt, kan du fjerne hele gruppen uden at søge efter de relevante selektorer.

CSS syntaks

parentrule {
  css deklarationer;
  & childrule {
    css deklarationer;  } 
}

Tekniske detaljer

Browser understøttelse