Sélecteurs d'imbrication &

Baseline 2023

Newly available

Depuis December 2023, cette fonctionnalité fonctionne sur les appareils et les versions de navigateur les plus récents. Elle peut ne pas fonctionner sur les appareils ou navigateurs plus anciens.

Le sélecteur d'imbrication CSS & indique explicitement la relation entre les règles parentes et enfants lors de l'utilisation de l'imbrication CSS. Il rend les sélecteurs de règles enfants imbriquées relatifs à l'élément parent. Sans le sélecteur d'imbrication &, le sélecteur de règle enfant cible les éléments enfants. Les sélecteurs de règles enfants ont le même poids de spécificité que s'ils étaient dans :is().

Note : Règle enfant ne signifie pas sélecteur d'élément enfant. Une règle enfant peut cibler l'élément parent ou les éléments enfants selon l'utilisation du sélecteur d'imbrication &.

Si le sélecteur d'imbrication & n'est pas utilisé dans une règle de style imbriquée, il représente la racine de portée.

Syntaxe

css

parentRule {
  /* propriétés de style de la règle parente */
  & childRule {
    /* propriétés de style de la règle enfant */
  }
}

Sélecteur d'imbrication `&` et espaces

Considérez le code suivant où l'imbrication est réalisée sans le sélecteur d'imbrication &.

css

.parent-rule {
  /* propriétés de style de la règle parente */
  .child-rule {
    /* propriétés de style de la règle enfant */
  }
}

Lorsque le navigateur analyse les sélecteurs imbriqués, il ajoute automatiquement un espace entre les sélecteurs pour créer une nouvelle règle CSS. Le code suivant montre l'équivalent sans imbrication :

css

.parent-rule {
  /* propriétés de style de la règle parente */
}

.parent-rule .child-rule {
  /* propriétés de style pour les descendants .child-rule des ancêtres .parent-rule */
}

Lorsque la règle imbriquée doit être attachée (sans espace) à la règle parente, par exemple lors de l'utilisation d'une pseudo-classe ou de la création de sélecteurs composés, le sélecteur d'imbrication & doit être immédiatement préfixé pour obtenir l'effet souhaité.

Prenons un exemple où l'on souhaite styliser un élément, en fournissant des styles à appliquer en permanence, et en imbriquant certains styles à appliquer uniquement au survol. Si le sélecteur d'imbrication & n'est pas inclus, un espace est ajouté et on obtient un ensemble de règles qui applique les styles imbriqués à tout descendant survolé du sélecteur de la règle parente. Ce n'est cependant pas le comportement souhaité.

css

.parent-rule {
  /* propriétés de style de la règle parente */
  :hover {
    /* propriétés de style de la règle enfant */
  }
}

/* le navigateur analyse les règles imbriquées ci-dessus comme indiqué ci-dessous */
.parent-rule {
  /* propriétés de style de la règle parente */
}

.parent-rule *:hover {
  /* propriétés de style de la règle enfant */
}

Avec le sélecteur d'imbrication & ajouté sans espace, les éléments correspondant à la règle parente seront stylisés lors du survol.

css

.parent-rule {
  /* propriétés de style de la règle parente */
  &:hover {
    /* propriétés de style de la règle enfant */
  }
}

/* le navigateur analyse les règles imbriquées ci-dessus comme indiqué ci-dessous */
.parent-rule {
  /* propriétés de style de la règle parente */
}

.parent-rule:hover {
  /* propriétés de style de la règle enfant */
}

Ajouter le sélecteur d'imbrication `&`

Le sélecteur d'imbrication & peut aussi être ajouté à la fin pour inverser le contexte des règles.

css

.card {
  /* .card styles */
  .featured & {
    /* .featured .card styles */
  }
}

/* le navigateur analyse les règles imbriquées ci-dessus comme indiqué ci-dessous */

.card {
  /* .card styles */
}

.featured .card {
  /* .featured .card styles */
}

Le sélecteur d'imbrication & peut être placé plusieurs fois :

css

.card {
  /* .card styles */
  .featured & & & {
    /* .featured .card .card .card styles */
  }
}

/* le navigateur analyse les règles imbriquées ci-dessus comme indiqué ci-dessous */

.card {
  /* .card styles */
}

.featured .card .card .card {
  /* .featured .card .card .card styles */
}

Impossible de représenter les pseudo-éléments

Le sélecteur & est équivalent au sélecteur :is() et possède la même limitation que celui-ci, il ne peut pas représenter les pseudo-éléments.

Par exemple, avec la règle de style suivante, aucun contenu généré ne sera coloré en rouge, même lorsqu'il est imbriqué dans <div class="important">, car .important :is(.foo::before) ne peut rien cibler.

css

.foo::before {
  content: "Hello";

  .important & {
    color: red;
  }
}

Cette limitation s'applique également aux règles imbriquées, dont les propriétés sont implicitement englobées dans un sélecteur &. Par exemple, avec la règle suivante, aucun contenu généré ne sera coloré en rouge, même sur un petit écran, car la propriété color: red est implicitement englobée dans un sélecteur &, qui correspond ici à :is(.foo::before).

css

.foo::before {
  content: "Hello";

  @media (width < 600px) {
    color: red;
  }
}

Examples

Les deux exemples suivants produisent le même résultat. Le premier utilise des styles CSS classiques et le second utilise le sélecteur d'imbrication &.

Utiliser des styles CSS classiques

Cet exemple utilise des styles CSS classiques.

HTML

html

<p class="example">
  Ce paragraphe <a href="#">contient un lien</a>, essayez de le survoler ou de
  le sélectionner.
</p>

CSS

css

.example {
  font-family: system-ui;
  font-size: 1.2rem;
}

.example > a {
  color: tomato;
}

.example > a:hover,
.example > a:focus {
  color: ivory;
  background-color: tomato;
}

Résultat

Utiliser `&` dans des styles CSS imbriqués

Cet exemple utilise des styles CSS imbriqués.

HTML

html

<p class="example">
  Ce paragraphe <a href="#">contient un lien</a>, essayez de le survoler ou de
  le sélectionner.
</p>

CSS

css

.example {
  font-family: system-ui;
  font-size: 1.2rem;
  & > a {
    color: tomato;
    &:hover,
    &:focus {
      color: ivory;
      background-color: tomato;
    }
  }
}

Résultat

Utiliser `&` en dehors d'une règle imbriquée

Si le sélecteur d'imbrication & n'est pas utilisé dans une règle de style imbriquée, il représente la racine de portée.

html

<p>
  Passez le curseur sur la boîte de sortie pour changer la couleur
  d'arrière-plan du document.
</p>

css

& {
  color: blue;
  font-weight: bold;
}

&:hover {
  background-color: wheat;
}

Résultat

Dans ce cas, tous les styles s'appliquent au document.

Spécifications

Specification
CSS Nesting Module Level 1 # nest-selector

Compatibilité des navigateurs

Voir aussi

Help improve MDN

Learn how to contribute

Cette page a été modifiée le 28 janv. 2026 par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content