Liste de sélecteurs

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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() et :where() qui n'ont pas ce problème historique d'invalidation des listes de sélecteurs.