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.
/* 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 |