: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.
Exemple
#.link:is(:hover, :focus-visible) {
color: #fff;
text-decoration-color: #a78bfa;
text-decoration-thickness: 2px;
}<style>.link { color: #c4b5fd; text-underline-offset: 4px; text-decoration-color: #52525b; }</style>
<p style="margin: 0;">Survolez le <a class="link" href="#">premier lien</a> ou cliquez dans l’aperçu et atteignez le <a class="link" href="#">second</a> avec la touche Tab.</p>Définition et utilisation
#La pseudo-classe :is() accepte une liste de sélecteurs et correspond dès que l’élément correspond à l’un d’entre eux. Son principal avantage est une écriture plus courte : au lieu de article h2, article h3, section h2, section h3, il suffit d’écrire :is(article, section) :is(h2, h3).
La liste dans :is() est tolérante. Si l’un des sélecteurs est invalide ou non pris en charge, le navigateur l’ignore simplement, et le reste fonctionne. Une liste ordinaire séparée par des virgules rejetterait toute la règle dans ce cas.
La spécificité de :is() est celle du sélecteur le plus fort de la liste, peu importe celui par lequel l’élément correspond réellement. :is(#hero, p) a un poids de (1, 0, 0) même pour de simples paragraphes. Si vous voulez la même écriture mais avec un poids nul, utilisez :where().
Les pseudo-éléments ne peuvent pas figurer dans la parenthèse : :is(::before, ::after) ne fonctionnera pas, il faut les écrire séparément.
Syntaxe
#:is( <liste de sélecteurs> )Exemples de sélecteurs
#- Les titres dans
articleou danssection. Un seul sélecteur au lieu de deux. - La liste peut aussi se trouver à la fin : un titre et un paragraphe dans
aside. :is(article, aside) :is(h4, p)
Deux listes donnent quatre combinaisons en une seule écriture courte.:is(section, :unknown-selector) p
Le sélecteur inconnu:unknown-selectorest ignoré, et le reste de la liste fonctionne. Une liste ordinaire séparée par des virgules aurait rejeté toute la règle.
Exemples de sélecteurs en pratique
#:is(article, section) h4
article ou dans section. Un seul sélecteur au lieu de deux.:is(article, section) h4 { background: #7c3aed; color: #fff; }aside :is(h4, p)
aside.aside :is(h4, p) { background: #7c3aed; color: #fff; }:is(article, aside) :is(h4, p)
:is(article, aside) :is(h4, p) { background: #7c3aed; color: #fff; }:is(section, :unknown-selector) p
:unknown-selector est ignoré, et le reste de la liste fonctionne. Une liste ordinaire séparée par des virgules aurait rejeté toute la règle.:is(section, :unknown-selector) p { background: #7c3aed; color: #fff; }Plus d’exemples
#:is(ul, ol) :is(ul, ol) {
margin: 4px 0;
color: #a1a1aa;
font-size: 14px;
}<ul class="stage" style="margin: 0; padding: 10px 10px 10px 30px;">
<li>Cours
<ol><li>HTML et CSS</li><li>JavaScript</li></ol>
</li>
<li>Documentation
<ul><li>Sélecteurs</li></ul>
</li>
</ul>Une seule règle couvre quatre cas : ul ul, ul ol, ol ul et ol ol.
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
#- Utilisez
:is()pour regrouper des états :.btn:is(:hover, :focus-visible). Vous obtenez l’effet souris et clavier dans une seule règle. - Surveillez le poids. Un seul identifiant dans la liste augmente la spécificité de toute la pseudo-classe, même pour les éléments qui correspondent par une classe.
- Quand vous écrivez des styles de base destinés à être facilement redéfinis, remplacez
:is()par:where().
Entrées associées
#- :where()Fonctionne comme :is(), mais a toujours une spécificité nulle. Idéale pour les styles de base, faciles à redéfinir.
- :not()Sélectionne les éléments qui ne correspondent à aucun des sélecteurs fournis, ni à aucun de la liste.
- :has()Sélectionne un élément en fonction de ce qu’il contient ou de ce qui se trouve après lui. Permet de styliser un parent selon ses enfants.
- A, BLa virgule combine plusieurs sélecteurs en une seule règle, pour leur donner les mêmes styles sans répéter les déclarations.
- 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.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.