Liste de sélecteurs

Description

Lorsque plusieurs sélecteurs partagent les mêmes déclarations, ils peuvent être regroupés dans une liste séparée par des virgules. Les listes de sélecteurs peuvent aussi être passées en paramètre à certaines pseudo-classes CSS fonctionnelles. Des espaces peuvent apparaître avant et/ou après la virgule.

Les trois déclarations suivantes sont équivalentes :

span {
  border: red 2px solid;
}
div {
  border: red 2px solid;
}

span,
div {
  border: red 2px solid;
}

:is(span, div) {
  border: red 2px solid;
}

Exemples

Lorsque l'on applique les mêmes styles à des éléments correspondant à des critères différents, regrouper les sélecteurs dans une liste séparée par des virgules permet d'améliorer la cohérence tout en réduisant la taille des feuilles de style.

Groupement sur une seule ligne

Cet exemple montre le groupement de sélecteurs sur une seule ligne à l'aide d'une liste séparée par des virgules.

h1, h2, h3, h4, h5, h6 {
  font-family: Helvetica, Arial;
}

Groupement sur plusieurs lignes

Cet exemple montre le groupement de sélecteurs sur plusieurs lignes à l'aide d'une liste séparée par des virgules.

#main,
.content,
article,
h1 + p {
  font-size: 1.1em;
}

Listes de sélecteurs valides et invalides

Un sélecteur invalide ne correspond à rien. Lorsqu'une liste de sélecteurs contient un sélecteur invalide, tout le bloc de style est ignoré, sauf pour les pseudo-classes :is() et :where() qui acceptent des listes de sélecteurs tolérantes.

Liste de sélecteurs invalide

L'un des inconvénients de l'utilisation d'une liste de sélecteurs est qu'un seul sélecteur non pris en charge rend l'ensemble de la règle invalide.

Considérez les deux ensembles de règles CSS suivants :

h1 {
  font-family: sans-serif;
}
h2:invalid-pseudo {
  font-family: sans-serif;
}
h3 {
  font-family: sans-serif;
}

h1,
h2:invalid-pseudo,
h3 {
  font-family: sans-serif;
}

Ces deux ensembles ne sont pas équivalents. Dans le premier, les styles seront appliqués aux éléments h1 et h3, mais la règle h2:invalid-pseudo ne sera pas interprétée. Dans le second, puisqu'un sélecteur de la liste est invalide, l'ensemble de la règle ne sera pas interprété. Ainsi, aucun style ne sera appliqué à h1 et h3 : dès qu'un sélecteur d'une liste est invalide, tout le bloc de style est ignoré.

Liste de sélecteurs tolérante

Pour remédier au problème de la liste de sélecteurs invalide, on peut utiliser les pseudo-classes :is() ou :where(), qui acceptent une liste de sélecteurs tolérante. Chaque sélecteur de la liste est analysé individuellement : les sélecteurs invalides sont ignorés et seuls les valides sont utilisés.

En reprenant l'exemple précédent, les deux ensembles de règles CSS suivants sont alors équivalents :

h1 {
  font-family: sans-serif;
}
h2:maybe-unsupported {
  font-family: sans-serif;
}
h3 {
  font-family: sans-serif;
}

:is(h1, h2:maybe-unsupported, h3) {
  font-family: sans-serif;
}

La différence entre les deux est que la spécificité de :is() correspond à celle de son argument le plus spécifique, tandis que le sélecteur :where() et la liste de sélecteurs tolérante n'ajoutent aucun poids de spécificité.

Liste de sélecteurs relatifs

Une liste de sélecteurs relatifs est une liste de sélecteurs séparés par des virgules, analysée comme des sélecteurs relatifs, qui commencent par un combinateur explicite ou implicite.

h2:has(+ p, + ul.red) {
  font-style: italic;
}

Dans l'exemple ci-dessus, le style italique sera appliqué à tout titre h2 immédiatement suivi d'un paragraphe <p> ou d'une liste <ul class="red">. À noter : les pseudo-éléments et le sélecteur :has() ne sont pas valides à l'intérieur de la liste de sélecteurs relatifs de :has().

Spécifications

Compatibilité des navigateurs

Voir aussi

• Les pseudo-classes :is() et :where() acceptent des listes de sélecteurs tolérantes.
• La pseudo-classe :not() accepte une liste de sélecteurs classique.
• La pseudo-classe :has() accepte une liste de sélecteurs relative.
• Sélecteurs CSS