Les pseudo-classes :is() et :where().

:is()

:where()

Résumé des caractéristiques du sélecteur `:is()`

Description rapide

Pseudo-classe permettant de simplifier les syntaxes complexes faisant intervenir plusieurs sélecteurs.

Statut

Standard

Module W3C

Sélecteurs

Références (W3C)

Selectors Level 4

Statut du document: WD (document de travail)

Description des pseudo-classes `:is()` et `:where()`.

Ces deux pseudo-classes visent à simplifier l'écriture des combinaisons de sélecteurs en se comportant un peu comme un OU. La différence entre :is() et :where() se situe au niveau des priorités.

Une liste de sélecteurs est indiquée entre les parenthèses de :is(), pour désigner les éléments qui correspondent à n'importe lequel des sélecteurs énumérés.

Par exemple :is(h1,h2,H3) désigne tous les titres h1, h2 et h3. Dans un cas aussi simple il aurait été plus facile d'écrire simplement h1,h2,H3.

Mais lorsqu'il y a combinaison de plusieurs sélecteurs, :is() permet souvent de raccourcir l'écriture. Par exemple, pour désigner les éléments h1, h2 et h3 qui sont inclus dans l'élément #edito, l'écriture sans utiliser :is() est la suivante :


	#edito h1, #edito h2, #edito h3 { ... }

Ce qui peut se simplifier en utilisant la pseudo-classe :is() :


	#edito :is(h1,h2,h3) { ... }

Les pseudo-éléments ne peuvent pas figurer dans la liste des sélecteurs. La syntaxe suivante est donc incorrecte :


	#edito :is(h1::first-letter, h2::first-letter) { ... }  /* Incorrect */

La liste des sélecteurs est dite "tolérante" ce qui veut dire que, si la syntaxe de certains des sélecteurs n'est pas reconnue, cela n'invalide pas l'ensemble de l'expression : les sélecteurs inconnus sont simplement ignorés, :is() travaille alors avec les seuls sélecteurs qui ont été reconnus.

Remarque : plusieurs navigateurs avaient développé une fonctionnalité équivalente mais avec des syntaxes différentes, comme par exemple les pseudo-classes :any() et :matches(). Dans la mesure où ces syntaxes n'ont pas été standardisées par le W3C, il est fortement déconseillé de les utiliser.

Calcul des priorités de `:is()` et `:where()`.

La priorité d'un sélecteur est une notion importante qui détermine quelle règle sera utilisée en cas de conflit. Reportez-vous à la page sur Les priorités pour savoir comment sont résolues les contradictions.

La seule différence entre ces deux pseudo-classe est la priorité :

La priorité de :is() est celle du sélecteur le plus prioritaire parmi ceux énumérés dans la liste.
La priorité de :where() est zéro.

Exemples d'utilisation de `:is()`.

Exemple 1.

Définir une bordure pour les images qui sont contenues dans un tableau, que ce soit dans les cellules classiques td ou dans les cellules de titre th :

Syntaxe utilisant :is()


	:is(td,th) > img {
	   border:1px solid;
	}

Syntaxe équivalente sans utiliser :is() :


	td > img, th > img {
	   border:1px solid;
	}

Exemple 2.

Distinguer par une couleur et une taille de caractères plus importante les premières lettres des titres de h1 à h4 :


	:is(h1,h2,h3,h4)::first-letter {
	   color:blue;
	   font-size:2em;
	}

Syntaxe équivalente sans utiliser :is() :


	h1::first-letter, h2::first-letter, h3::first-letter, h4::first-letter {
	   color:blue;
	   font-size:2em;
	}

Exemple 3 : assurer la compatibilité avec de vieux navigateurs.

Pour assurer la compatibilité avec les navigateurs antérieurs à 2021, il faut multiplier les syntaxes en ajoutant les préfixes spécifiques à chaque navigateur.

Ceci est du texte écrit dans un élément div.

Texte dans une cellule de tableau

Autre texte

Troisième texte

Prise en charge par les navigateurs (compatibilité).

Le sélecteur par pseudo-classe :is() commence tout juste à être bien reconnu par les navigateurs actuels. Il faut dire que la norme a mis du temps à trancher entre les propositions des navigateurs, qui avaient tous choisi des syntaxes différentes comme :matches() ou :any(). Ces dernières ne doivent plus être utilisées.

Les deuxième et quatrième colonnes du tableau ci-dessous indiquent si la liste des sélecteurs est bien tolérante, c'est à dire si une erreur de syntaxe sur un des sélecteurs n'invalide pas toute la liste.

Pseudo-classe
:is()

Pseudo-classe
:is()
liste tolérante

Pseudo-classe
:where()

Pseudo-classe
:where()
liste tolérante

Estimation de la prise en charge globale.