Liste de sélecteurs

 Une liste de sélecteurs (,) permet de cibler tous les nœuds correspondants à l'une des conditions.

/* Cible tous les éléments correspondants */
span,
div {
  border: red 2px solid;
}

Afin de réduire la taille d'une feuille de style, on peut grouper les sélecteurs dans une liste séparée par des virgules.

Syntaxe

element, element, element { propriétés de style }

Exemples

Groupement sur une seule ligne

On peut grouper les sélecteurs sur une seule ligne :

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

Groupement sur plusieurs lignes

On peut grouper les sélecteurs sur plusieurs lignes :

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

Invalidation d'une liste de sélecteurs

Un inconvénient des listes de sélecteurs est la non-équivalence des deux blocs suivants :

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

En effet, un seul sélecteur vous manque et tout est dépeuplé. Enfin, un seul sélecteur invalide rend l'ensemble de la règle invalide.

Pour éviter cet effet indésirable, on pourra utiliser le sélecteur :is() qui ignore les sélecteurs invalides parmi ses arguments. Par contre, tous les sélecteurs passés en arguments auront la même spécificité.

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 }

Spécifications

Spécification État Commentaires
Selectors Level 4
La définition de 'Selector Lists' dans cette spécification.
Version de travail Renommage en « liste de sélecteur »
CSS Level 1
La définition de 'grouping' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi

  • Les pseudo-classes :is()  This is an experimental API that should not be used in production code. et :where()  This is an experimental API that should not be used in production code. qui n'ont pas ce problème historique d'invalidation des listes de sélecteurs.