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

Compatibilité des navigateurs

Voir aussi

• Les pseudo-classes :is()  et :where()  qui n'ont pas ce problème historique d'invalidation des listes de sélecteurs.