Nouveaux sélecteurs de pseudo-classe fonctionnels CSS :is() et :where()

Ces ajouts apparemment mineurs à la syntaxe des sélecteurs CSS vont avoir un impact important.

Adam Argyle

Lorsque vous écrivez du code CSS, vous pouvez parfois vous retrouver avec de longues listes de sélecteurs pour cibler plusieurs éléments avec les mêmes règles de style. Par exemple, si vous souhaitez ajuster la couleur des balises <b> trouvées dans un élément de titre, vous pouvez écrire :

h1 > b, h2 > b, h3 > b, h4 > b, h5 > b, h6 > b {
  color: hotpink;
}

Vous pouvez plutôt utiliser :is() et améliorer la lisibilité tout en évitant un sélecteur long :

:is(h1,h2,h3,h4,h5,h6) > b {
  color: hotpink;
}

La lisibilité et les avantages des sélecteurs plus courts ne sont qu'une partie de la valeur que :is() et :where() apportent au CSS. Dans cet article, vous découvrirez la syntaxe et la valeur de ces deux pseudo-sélecteurs fonctionnels.

Compatibilité du navigateur

:is()

:where()

Rencontrer :is() et :where()

Il s'agit de sélecteurs de pseudo-classe fonctionnels. Notez le () à la fin et la façon dont ils commencent par :. Il s'agit d'appels de fonction dynamiques d'exécution correspondant à des éléments. Lorsque vous écrivez du code CSS, ils vous permettent de regrouper des éléments au milieu, au début ou à la fin d'un sélecteur. Ils peuvent également modifier la spécificité, ce qui vous permet de l'annuler ou de l'augmenter.

Regroupement des sélecteurs

:where() peut effectuer toutes les opérations de regroupement que :is() peut effectuer. Cela inclut leur utilisation n'importe où dans le sélecteur, leur imbrication et leur empilement. La flexibilité CSS complète que vous connaissez et appréciez. Voici quelques exemples:

/* at the beginning */
:where(h1,h2,h3,h4,h5,h6) > b {
  color: hotpink;
}

/* in the middle */
article :is(header,footer) > p {
  color: gray;
}

/* at the end */
.dark-theme :where(button,a) {
  color: rebeccapurple;
}

/* multiple */
:is(.dark-theme, .dim-theme) :where(button,a) {
  color: rebeccapurple;
}

/* stacked */
:is(h1,h2):where(.hero,.subtitle) {
  text-transform: uppercase;
}

/* nested */
.hero:is(h1,h2,:is(.header,.boldest)) {
  font-weight: 900;
}

Chacun des exemples de sélecteur ci-dessus illustre la flexibilité de ces deux pseudo-classes fonctionnelles. Pour trouver les parties de votre code qui pourraient bénéficier de :is() ou :where(), recherchez des sélecteurs avec plusieurs virgules et des répétitions de sélecteurs.

Utiliser des sélecteurs simples et complexes avec :is()

Pour en savoir plus sur les sélecteurs, consultez le module sélecteurs de Learn CSS. Voici quelques exemples de sélecteurs simples et complexes pour illustrer cette fonctionnalité :

article > :is(p,blockquote) {
  color: black;
}

:is(.dark-theme.hero > h1) {
  font-weight: bold;
}

article:is(.dark-theme:not(main .hero)) {
  font-size: 2rem;
}

Pour l'instant, :is() et :where() sont syntaxiquement interchangeables. Il est temps de voir en quoi elles diffèrent.

Différence entre :is() et :where()

En termes de spécificité, :is() et :where() divergent fortement. Pour rafraîchir vos connaissances sur la spécificité, consultez le module sur la spécificité sur Learn CSS.

En résumé

• :where() n'a pas de spécificité.
  :where() écrase toutes les spécificités de la liste de sélecteur transmise en tant que paramètres fonctionnels. Il s'agit d'une première fonctionnalité de sélecteur de genre.
• :is() prend la spécificité de son sélecteur le plus spécifique.
  :is(a,div,#id) a un score de spécificité d'un ID, 100 points.

Le sélecteur de spécificité le plus élevé de la liste n'a été un problème pour moi que lorsque j'étais trop enthousiaste à propos du regroupement. J'ai toujours pu améliorer la lisibilité en déplaçant le sélecteur à forte spécificité vers son propre sélecteur, où il n'aurait pas autant d'impact. Voici un exemple :

article > :is(header, #nav) {
  background: white;
}

/* better as */
article > header,
article > #nav {
  background: white;
}

Avec :where(), j'attends de voir les bibliothèques proposer des versions sans spécificité. La concurrence de spécificité entre les styles d'auteur et les styles de bibliothèque pourrait prendre fin. Il n'y aurait aucune spécificité à laquelle se mesurer lors de l'écriture de CSS. Cela fait déjà un certain temps que le CSS travaille sur une fonctionnalité de regroupement de ce type. Elle est disponible et n'a pas encore été explorée. Amusez-vous à créer des feuilles de style plus petites et à supprimer les virgules.

Photo par Markus Winkler sur Unsplash