A, B
La virgule combine plusieurs sélecteurs en une seule règle, pour leur donner les mêmes styles sans répéter les déclarations.
Exemple
#input,
select,
textarea {
padding: 8px 10px;
border: 1px solid #52525b;
border-radius: 8px;
background: #18181b;
color: inherit;
font: inherit;
}<form class="stage" style="display: grid; gap: 8px;">
<input placeholder="Prénom">
<select><option>Cours CSS</option><option>Cours HTML</option></select>
<textarea rows="2" placeholder="Message"></textarea>
</form>Définition et utilisation
#Une liste de sélecteurs permet d’écrire les déclarations une seule fois pour plusieurs sélecteurs. Au lieu de trois règles séparées pour h1, h2 et h3, h1, h2, h3 { … } suffit. Chaque sélecteur de la liste agit de façon indépendante, et un élément qui correspond à n’importe lequel d’entre eux reçoit les styles.
La spécificité se calcule séparément pour chaque sélecteur de la liste. Dans la règle #logo, p, l’élément #logo reçoit le poids (1, 0, 0), et un paragraphe ordinaire seulement (0, 0, 1). La liste n’augmente pas le poids des sélecteurs les plus faibles.
Le piège le plus important : si un seul sélecteur de la liste est invalide ou inconnu du navigateur, toute la règle est ignorée. Une faute de frappe comme a:hovr ou le préfixe d’un autre navigateur peut désactiver les styles de tous les autres sélecteurs. Les listes dans :is() et :where() font exception : elles ignorent simplement les entrées invalides.
Écrivez les longues listes avec un seul sélecteur par ligne, avec une virgule à la fin de chaque ligne sauf la dernière. Une virgule après le dernier sélecteur est une erreur qui invalide toute la règle.
Syntaxe
#A, B, C { propriété: valeur; }Exemples de listes
#- Le titre et les deux paragraphes reçoivent le même style à partir d’une seule règle.
- Une liste peut mélanger des sélecteurs de natures différentes : une classe à côté de noms de balises.
- Une faute de frappe dans le second sélecteur invalide toute la règle. Même les paragraphes ordinaires restent gris.
- La même liste dans
:is()est tolérante : le sélecteur invalide est ignoré, et les paragraphes reçoivent le style.
Exemples de listes en pratique
#h3, p
h3, p { background: #7c3aed; color: #fff; }p, p:hovr
p, p:hovr { background: #7c3aed; color: #fff; }:is(p, p:hovr)
:is() est tolérante : le sélecteur invalide est ignoré, et les paragraphes reçoivent le style.:is(p, p:hovr) { background: #7c3aed; color: #fff; }Plus d’exemples
#.link:hover,
.link:focus-visible {
color: #fff;
text-decoration-thickness: 2px;
}<style>.link { color: #c4b5fd; text-underline-offset: 4px; }</style>
<p style="margin: 0;">Survolez <a class="link" href="#">ce lien</a> ou cliquez dans l’aperçu et atteignez-le avec la touche Tab.</p>Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Placez chaque sélecteur sur sa propre ligne. Il est alors plus facile de repérer une faute de frappe qui désactiverait toute la règle.
- Écrivez les sélecteurs avec des préfixes de navigateur, par exemple
::-webkit-…et::-moz-…, dans des règles séparées. Un navigateur qui ne reconnaît pas l’un d’eux rejettera toute la liste. - Vous raccourcirez une longue liste au début répétitif avec
:is():.card :is(h2, h3, h4)au lieu de trois sélecteurs complets.
Entrées associées
#- :is()Fait correspondre l’élément à n’importe quel sélecteur de la liste. Raccourcit les longs sélecteurs répétitifs en une seule écriture.
- :where()Fonctionne comme :is(), mais a toujours une spécificité nulle. Idéale pour les styles de base, faciles à redéfinir.
- SpécificitéLe poids d’un sélecteur, qui détermine quelle règle gagne lorsque plusieurs règles définissent la même propriété du même élément.
- Sélecteur de typeSélectionne tous les éléments portant un nom de balise donné, par exemple chaque paragraphe p ou chaque élément de liste li.
- .classeSélectionne les éléments qui ont la classe indiquée dans l’attribut class. Le sélecteur le plus utilisé pour styliser des composants.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.