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

Ces ajouts apparemment mineurs à la syntaxe du sélecteur 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 de toutes les 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;
}

À la place, vous pouvez utiliser :is() et améliorer la lisibilité tout en évitant un sélecteur trop long:

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

La lisibilité et les fonctionnalités de sélection plus courtes ne sont qu'une partie de la valeur ajoutée par :is() et :where() dans CSS. Dans cet article, vous allez découvrir la syntaxe et la valeur de ces deux pseudo-sélecteurs fonctionnels.

Une visualisation infinie des éléments avant et après l'utilisation de :is()

Compatibilité du navigateur

:is()

Navigateurs pris en charge

  • 88
  • 88
  • 78
  • 14

Source

:where()

Navigateurs pris en charge

  • 88
  • 88
  • 78
  • 14

Source

Découvrez :is() et :where()

Il s'agit de sélecteurs de pseudo-classe fonctionnels. Vous remarquerez la () à la fin et la façon dont ils commencent par :. Considérez-les comme des appels de fonctions 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. Elles peuvent également changer la spécificité, ce qui vous donne le pouvoir de nullifier ou d'augmenter la spécificité.

Regroupement de sélecteurs

Tout ce que :is() peut faire concernant le regroupement, tout comme :where(). Cela inclut leur utilisation n'importe où dans le sélecteur, leur imbrication et leur empilement. Une flexibilité CSS totale 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 montre la flexibilité de ces deux pseudo-classes fonctionnelles. Pour trouver les zones de votre code qui pourraient bénéficier de :is() ou :where(), recherchez les sélecteurs comportant plusieurs virgules et répétitions.

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

Pour rafraîchir vos connaissances sur les sélecteurs, consultez le module consacré aux sélecteurs sur la page "Apprendre à utiliser CSS". Voici quelques exemples de sélecteurs simples et complexes pour illustrer leur capacité:

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 interchangeables au niveau syntaxique. Il est temps de voir en quoi ils sont différents.

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

En termes de spécificité, :is() et :where() divergent fortement. Pour en savoir plus sur la spécificité, consultez le module de spécificité sur Learn CSS.

En bref

  • :where() n'a pas de spécificité.
    :where() élimine toute la spécificité de la liste de sélection transmise en tant que paramètres fonctionnels. Il s'agit d'une première fonctionnalité de sélection 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.

Choisir le sélecteur de spécificité le plus élevé de la liste n'a été un problème que lorsque j'étais trop enthousiaste à propos des regroupements. J'ai toujours pu améliorer la lisibilité en déplaçant le sélecteur de spécificité élevée vers son propre sélecteur, où cela n'aurait pas beaucoup d'impact. Voici un exemple de ce que je veux dire:

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

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

Avec :where(), j'attends que les bibliothèques proposent des versions sans spécificité. La concurrence de spécificité entre les styles d'auteurs et les styles de bibliothèque pourrait prendre fin. Il n'y a pas de spécificité à laquelle faire concurrence lors de la rédaction de CSS. Le CSS travaille sur ce type de fonctionnalité de regroupement depuis un certain temps. Elle est là, et elle est encore largement inexplorée. Amusez-vous à créer des feuilles de style plus petites et à supprimer les virgules.

Photo par Markus Winkler sur Unsplash