How the CSS :is() selector will simplify things

One of the selectors in CSS Level 4 is :is(). It is the successor to :any() and :matches() (which are supplanted by :is()):

The :is() CSS pseudo-class function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list. This is useful for writing large selectors in a more compact form.

/* Without :is */
article > h1,
article > h2,
article > h3,
article > h4,
article > h5 {
  /* … */

/* With :is() */
article > :is(h1, h2, h3, h4, h5) {
  /* … */

Browser Support isn’t quite there yet though, as they’re either all behind feature flags or use the outdated :matches() or (prefixed) :any()

MDN Web Docs; :is() (:matches(), :any())

Video via @argyleink

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.