Does :is() pseudo selector hint at CSS preprocessing in the future?

Let’s compare CSS without :is, SCSS and CSS with :is.

This is how we used to apply style in the past:

div p,
main p,
section p {
  font-size: 1rem;
}

SCSS makes a bit easier to write the same code but you have to compile it:

div, main, section {
  p {
    font-size: 1rem;
  }
}

The same code you can write using :is in pure CSS and without compilation requirements.

:is(div, main, section) p {
  font-size: 1rem;
}

• Code reduction? Checked.
• No need to compile the code? Checked.
• Supported in major browsers? Checked.

It’s really nice that CSS is moving towards a direction where writing a code will be lesser and faster.

If that happens then SCSS might have a it’s biggest threat from CSS itself.

But I should not get my hopes up. It might take few years to get to that point and with support in all major browsers!

More Use Cases

Attach with an html tag or a selector

This code will check for either one of the classes, title or subtitle inside main tag and apply the specified style.

main:is(.title, .subtitle) {
  font-weight: bold;
}

Multiple :is

You can have multiple :is in one line:

:is(header, footer) :is(h1, h2, h3) {
  color: black;
}

To write that in CSS is more time consuming and more code too:

header h1, 
header h2, 
header h3,
footer h1,
footer h2,
footer h3 {
  color: black;
}

Also, writing the same rule with :is has higher specificity. Checkout the w3.org draft.

What about old browsers?

Older browsers support :is feature as :matches() or :any().

Here’s a nice cross-browser solution:

:-webkit-any(div, main, section) p {
  font-size: 1rem;
}

:-moz-any(div, main, section) p {
  font-size: 1rem;
}

:matches(div, main, section) p {
  font-size: 1rem;
}

:is(div, main, section) p {
  font-size: 1rem;
}

MDN has a few really nice examples. Check it out.

Share this post