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 à 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. Vous remarquerez la présence de () à la fin et dont le nom commence 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. Ce consiste à les utiliser n'importe où dans le sélecteur, à les imbriquer et à les empiler. 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 identifier les parties de votre code qui pourraient bénéficier :is() ou :where() : recherchez les sélecteurs comportant plusieurs virgules et un sélecteur. répétition.

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 interchangeables d'un point de vue syntaxique. Il est temps de regardez en quoi ils sont différents.

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

En ce qui concerne la spécificité, :is() et :where() divergent fortement. Pour une pour rafraîchir vos connaissances, consultez le module de formation 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 élément le plus spécifique sélecteur.
  :is(a,div,#id) a un score de spécificité d'un ID, soit 100 points.

Utiliser le sélecteur de spécificité le plus élevé de la liste n'a été qu'un piège quand j'étais trop enthousiaste à l'idée de regrouper les données. j'ai toujours pu améliorer la lisibilité en déplaçant le sélecteur de niveau de spécificité élevé 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 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. Le CSS travaille sur une fonctionnalité de regroupement de ce type depuis un certain nombre Elle est déjà là et reste un territoire largement inexploré. Amusez-vous à créer des feuilles de style plus petites et à supprimer les virgules.

Photo par Markus Winkler sur Unsplash