Liste de sélecteurs

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

css
/* 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 :

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

Groupement sur plusieurs lignes

On peut grouper les sélecteurs sur plusieurs lignes :

css
#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 :

css
h1 {
  font-family: sans-serif;
}
h2:maybe-unsupported {
  font-family: sans-serif;
}
h3 {
  font-family: sans-serif;
}
css
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é.

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

Spécifications

Specification
Selectors Level 4
# grouping

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi

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