Pseudo-classes CSS :is() et :where()

Pourquoi, quand et comment utiliser les sélecteurs :is() et :where() ? Plus les feuilles de style des documents HTML se complexifient, plus le besoin de grouper les sélecteurs visés par les règles CSS se fait sentir. Si nous avons vu se développer des solutions de regroupement de sélecteurs avec les préprocesseurs SASS ou LESS, :is() et :where() offrent aujourd’hui une alternative native aux problématiques de regroupement de règles au sein d’une feuille de styles, mais il peut être nécessaire de comprendre le poids des sélecteurs pour utiliser  ces deux pseudo-sélecteur CSS de façon optimale.

:is() & :where(), un seul comportement fonctionnel

Les pseudo-sélecteurs :is() et :where() sont fonctionnellement identiques et permettent de grouper une liste de sélecteurs. Néanmoins le poids des sélecteur groupés ne sera pas impacté de la même façon suivant que vous utilisiez :is() ou :where().

Dans l’exemple suivant, nous groupons un sélecteur d’ancre <a> et de classe « .pink » afin de cibler globalement un sélecteur enfant <b> :

:is(a, .pink) > b {
	font-weight: normal;
	color: hotpink;
}
a  > b {
	color: #000;
}

Ici les sélecteurs <a> et .pink sont regrouper pour faciliter le ciblage du sélecteur enfant <b>, ce qui est quand même plus lisible que :

h2 > b, h3 > b, h4 > b, h5 > b, h6 > b, a > b{
	font-weight: normal;
	color: hotpink;
}

Mais ce regroupement a aussi une autre vertu puisqu’il attribut la puissance du sélecteur le plus spécifique du groupe celui de l’ancre. La couleur des liens restera donc « hotpink » bien que leur couleur ait été redéfinie par une règle postérieure.

La deuxième méthode pour parvenir à ce résultat consiste donc à utiliser :where() :

a  > b {
 color: #000;
}
:where(a, .pink) > b {
	font-weight: normal;
	color: hotpink;
	font-size: 1.5em;
}

La pseudo-classe :where() ne modifie pas la spécificité des sélecteurs groupés, la couleur des ancres de la page restera noire malgré l’antériorité de sa définition.

La pseudo-classe :is() compare donc les spécificités des sélecteurs du groupe pour attribuer à l’ensemble du groupe le score de spécificité (ou poids du sélecteur) le plus élevé.

Il en résulte qu’une règle CSS définie avec :is() écrasera une règle définie même postérieurement dans la feuille de styles, s’appliquant aux éléments les moins spécifiques du groupe.

:is() et :where() deux sélecteurs indulgents

Il est finalement intéressant de noter que le groupement ignorera purement et simplement tout sélecteur non valide englobés entre les parenthèses du sélecteur.

La règle CSS suivante ne lèvera aucune erreur et permettra de cibler l’élément HTML <b> de tout le groupe inclus au sein du pseudo sélecteur :is() :

:is(h2,h3,h4, h5, h6, a, truc) > b {

            font-weight: normal;

            color: hotpink;

}

Pour aller plus loin avec :is() et :where()

is:() sur MDN : :is() (:matches(), :any())

:where() sur MDN : :where()