Sélecteur d'encapsulation CSS (&)

Définition et utilisation

Encapsulation CSS (&) Sélecteur utilisé pour appliquer des styles à un élément dans le contexte d'un autre élément.

L'encapsulation réduit le besoin de répeter les sélecteurs pour les éléments associés.

Exemple

Exemple 1

Avant l'encapsulation, vous devez déclarer explicitement chaque sélecteur individuellement, comme indiqué ci-dessous :

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

Essayez-le vous-même

Exemple 2

Après l'implémentation de l'encapsulation, le sélecteur est étendu et les règles de style associées sont regroupées dans la règle parente :

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

Essayez-le vous-même

Astuce :Si vous devez supprimer le style .box d'un projet, vous pouvez supprimer tout le groupe sans avoir à chercher les sélecteurs associés.

Grammaire CSS

règle_père {
  déclarations css;
  & règle_fille {
    déclarations css;  } 
}

Détails techniques

Version : Module de balisage CSS

Support du navigateur

Chrome Edge Firefox Safari Opéra
120 120 117 17.2 106