:where()
Fonctionne comme :is(), mais a toujours une spécificité nulle. Idéale pour les styles de base, faciles à redéfinir.
Exemple
#:where(.btn) {
padding: 8px 14px;
border: 0;
border-radius: 8px;
background: #3f3f46;
color: #fff;
}
.buy {
background: #10b981;
}<div style="display: flex; gap: 8px;">
<button class="btn" type="button">Par défaut</button>
<button class="btn buy" type="button">Acheter le cours</button>
</div>La première règle joue le rôle d’un style de bibliothèque de composants : grâce à :where(), elle a un poids de (0, 0, 0). La seconde est votre classe ordinaire, qui gagne sans !important, peu importe l’ordre des règles.
Définition et utilisation
#La pseudo-classe :where() accepte une liste de sélecteurs et correspond à l’élément qui correspond à l’un d’entre eux, exactement comme :is(). Il y a une seule différence, mais elle compte : quoi que vous écriviez dans la parenthèse, :where() ajoute un poids nul à la spécificité.
Elle convient donc aux styles destinés à céder facilement : réinitialisations, styles par défaut dans les bibliothèques de composants et les thèmes. La règle :where(.card) p a le poids d’un simple p, donc n’importe quel utilisateur de la bibliothèque la redéfinira avec une classe ordinaire, sans !important.
Seule la partie entre parenthèses est remise à zéro. Dans le sélecteur :where(.card) .title, la classe .title pèse toujours (0, 1, 0). La liste est aussi tolérante, comme dans :is() : les sélecteurs invalides sont ignorés, et le reste fonctionne.
Syntaxe
#:where( <liste de sélecteurs> )Exemples de sélecteurs
#(0, 0, 0)
L’identifiant entre parenthèses ne donne aucun poids, donc le simplepgagne. Le fond est vert.(1, 0, 0)
Pour comparer,:is()conserve le poids de l’identifiant et gagne. Le fond est bleu.(0, 1, 0)
Seule la partie entre parenthèses est remise à zéro. La classe.notepèse normalement et l’emporte surp. Le fond est bleu.:where(#intro, :unknown-selector)
(0, 0, 0)
Le sélecteur inconnu de la liste est ignoré, et le reste fonctionne. Le fond est bleu.
Exemples de sélecteurs en pratique
#:where(#intro)
p gagne. Le fond est vert.:where(#intro) { background: royalblue; }
p { background: seagreen; }:is(#intro)
:is() conserve le poids de l’identifiant et gagne. Le fond est bleu.:is(#intro) { background: royalblue; }
p { background: seagreen; }:where(#intro).note
.note pèse normalement et l’emporte sur p. Le fond est bleu.:where(#intro).note { background: royalblue; }
p { background: seagreen; }:where(#intro, :unknown-selector)
:where(#intro, :unknown-selector) { background: royalblue; }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
#- Écrivez les réinitialisations et les styles par défaut dans
:where(). N’importe quelle règle ultérieure, même avec un simple sélecteur de type, les redéfinira facilement. - N’enveloppez pas dans
:where()les styles censés gagner, par exemple les états d’erreur. Un poids nul les ferait perdre face à n’importe quoi.
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.
- 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.
- :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.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.