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
| Specification |
|---|
| Selectors Level 4 # grouping |
Compatibilité des navigateurs
BCD tables only load in the browser