&
Permet d’écrire des règles à l’intérieur d’autres règles, comme en Sass. Le signe & y représente le sélecteur de la règle parente.
Exemple
#.btn {
padding: 8px 14px;
border: 0;
border-radius: 8px;
background: #7c3aed;
color: #fff;
&:hover {
background: #6d28d9;
}
&.ghost {
background: transparent;
outline: 1px solid #7c3aed;
}
.icon {
margin-right: 6px;
}
}<style>button { font: inherit; cursor: pointer; }</style>
<div style="display: flex; gap: 8px;">
<button class="btn" type="button"><span class="icon">▶</span>Démarrer</button>
<button class="btn ghost" type="button">Annuler</button>
</div>Définition et utilisation
#L’imbrication native en CSS permet de placer une règle à l’intérieur d’une autre. Une règle imbriquée concerne les éléments à l’intérieur du parent, donc .card { p { … } } fonctionne comme .card p { … }. Vous gardez le code d’un composant dans un seul bloc et ne répétez pas le nom de la classe plusieurs fois.
Le signe & représente le sélecteur de la règle parente. Il est nécessaire quand un sélecteur doit se coller au parent sans espace : &:hover correspond au survol de l’élément lui-même, &.active à l’élément avec une classe supplémentaire, et &::before à son pseudo-élément. Sans &, le navigateur traite le sélecteur imbriqué comme un descendant. & peut aussi se placer à la fin : .dark & { … } change le style d’un élément lorsqu’il se trouve à l’intérieur de .dark.
À l’intérieur d’une règle, vous pouvez aussi placer @media et @supports, et les déclarations qu’ils contiennent s’appliquent directement au sélecteur en cours. C’est pratique pour les styles responsives : tout ce qui concerne un bouton se trouve au même endroit.
Il diffère de Sass sur certains détails. Le navigateur ne colle pas des fragments de noms, donc &__title ne construira pas la classe .card__title. Le sélecteur & fonctionne aussi comme :is() : quand le parent est la liste #logo, .brand, la règle imbriquée hérite du poids du sélecteur le plus fort de cette liste.
Syntaxe
#parent {
propriété: valeur;
enfant { … }
&:hover { … }
&.classe { … }
.contexte & { … }
}Variantes d’écriture
#sans &
Un sélecteur imbriqué sans&désigne un descendant, comme.demo span. Les étiquettes de toutes les cartes changent de couleur.- Survolez n’importe quelle carte avec le curseur.
&colle la pseudo-classe à la carte elle-même, sans espace. - Une carte qui porte en plus la classe
active..activeseul, à l’intérieur de la règle, chercherait un descendant portant cette classe. &à la fin inverse la direction : la carte reçoit le style quand elle se trouve à l’intérieur de.promo.- Une règle
@mediaà l’intérieur du bloc s’applique directement à.demo. L’aperçu a plus de 300 px de large, donc les cartes sont bleues.
Variantes d’écriture en pratique
#span
& désigne un descendant, comme .demo span. Les étiquettes de toutes les cartes changent de couleur..demo {
span { color: #fbbf24; }
}&:hover
& colle la pseudo-classe à la carte elle-même, sans espace..demo {
&:hover { background: #7c3aed; }
}&.active
active. .active seul, à l’intérieur de la règle, chercherait un descendant portant cette classe..demo {
&.active { background: #7c3aed; }
}.promo &
& à la fin inverse la direction : la carte reçoit le style quand elle se trouve à l’intérieur de .promo..demo {
.promo & { background: #7c3aed; }
}@media (min-width: 300px)
@media à l’intérieur du bloc s’applique directement à .demo. L’aperçu a plus de 300 px de large, donc les cartes sont bleues..demo {
@media (min-width: 300px) {
background: #0284c7;
}
}Plus d’exemples
#.grid {
display: grid;
gap: 8px;
@media (min-width: 560px) {
grid-template-columns: repeat(3, 1fr);
}
}<div class="grid">
<div class="box">HTML</div>
<div class="box">CSS</div>
<div class="box">JS</div>
</div>Sur un grand écran, les éléments se placent sur trois colonnes, sur un téléphone l’un sous l’autre. Tout le comportement de la grille se trouve dans un seul bloc.
Compatibilité des navigateurs
#Largement disponible · depuis 2023
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Ne vous imbriquez pas plus profondément que deux ou trois niveaux. Chaque niveau allonge le sélecteur et augmente la spécificité, exactement comme avec une chaîne écrite à la main.
- Écrivez toujours les pseudo-classes et les pseudo-éléments avec
&:&:hover,&::after.:hoverseul, à l’intérieur de la règle, signifie « n’importe quel descendant sous le curseur ». - Si le site doit fonctionner dans des navigateurs antérieurs à fin 2023, restez avec un préprocesseur (Sass, PostCSS), qui transforme les imbrications en CSS ordinaire.
Entrées associées
#- A BUn espace entre deux sélecteurs sélectionne les éléments B situés n’importe où à l’intérieur de l’élément A, à n’importe quelle profondeur.
- :hoverCorrespond à l’élément survolé par le curseur de la souris. La base des effets de survol sur les boutons, les liens et les cartes.
- :is()Fait correspondre l’élément à n’importe quel sélecteur de la liste. Raccourcit les longs sélecteurs répétitifs en une seule écriture.
- SpécificitéLe poids d’un sélecteur, qui détermine quelle règle gagne lorsque plusieurs règles définissent la même propriété du même élément.
- .classeSélectionne les éléments qui ont la classe indiquée dans l’attribut class. Le sélecteur le plus utilisé pour styliser des composants.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.