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()

Rencontrez :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 qui correspondent à 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électeurs 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 rafraîchir vos connaissances sur les sélecteurs, consultez le module sur les sélecteurs sur 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 aucune spécificité.
  :where() écrase toute la spécificité de la liste de sélecteurs transmise en tant que paramètres fonctionnels. Il s'agit d'une fonctionnalité de sélecteur unique en son 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 ne m'a posé problème que lorsque j'étais trop enthousiaste à l'idée de regrouper. 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. CSS travaille sur une fonctionnalité de regroupement de ce type depuis un certain temps. Elle est là, et c'est encore un territoire largement inexploré. Amusez-vous à créer des feuilles de style plus petites et à supprimer les virgules.

Photo de Markus Winkler, publiée sur Unsplash