Sélecteur d'encapsulation CSS (&)
- Page précédente [attribute*=value]
- Page suivante element
- Retour au niveau supérieur Manuel de sélecteurs 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; }
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; } } }
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 |
- Page précédente [attribute*=value]
- Page suivante element
- Retour au niveau supérieur Manuel de sélecteurs CSS