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