Liste de sélecteurs

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

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

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

On peut grouper les sélecteurs sur plusieurs lignes :

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

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;
}

• 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.