CSS insluiten selectors (&)

Definitie en gebruik

CSS insluiten (&) Selectors worden gebruikt om stijlen toe te passen op een element in de context van een ander element.

Insluiten vermindert het nodig om de selector voor gerelateerde elementen te herhalen.

Voorbeeld

Voorbeeld 1

Voor het insluiten moet u elke selector expliciet afzonderlijk declareren, zoals hieronder aangegeven:

.box {
  rand: 2px vast groen;
  achtergrondkleur: beige;
  lettertype: monospace;
  lettergrootte: 20px;
}
.box > a {
  kleur: groen;
}
.box > a:hover {
  kleur: wit;
  achtergrondkleur: zalm;
}

Probeer het zelf

Voorbeeld 2

Na het insluiten, wordt de selector voortgezet en de relevante stijlregels worden gegroepeerd in de ouderregel:

.box {
  rand: 2px vast groen;
  achtergrondkleur: beige;
  lettertype: monospace;
  lettergrootte: 20px;
  & > a {
    kleur: groen;
    &:hover {
      kleur: wit;
      achtergrondkleur: zalm;
    }
  }
}

Probeer het zelf

Tip:Als de .box-stijl in het voorbeeld moet worden verwijderd van uw project, kunt u het hele groep verwijderen zonder de relevante selectoren te zoeken.

CSS syntaxis

ouderrule {
  css declarations;
  & kindregel {
    css declarations;  } 
}

Technische details

Browser ondersteuning