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

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Selector list (,)Chrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 3Opera Support complet OuiSafari Support complet 1WebView Android Support complet ≤37Chrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet 1Samsung Internet Android Support complet 1.0

Légende

Support complet  
Support complet

Voir aussi

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