dots Created with Sketch.
Yogesh Chauhan's Blog

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

in CSS on July 22, 2021

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.

amazon

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Jul 22 Is there a CSS parent selector? #Jul 22 Difference between :where and :is in CSS #Jul 22 Does :is() pseudo selector hint at CSS preprocessing in the future? #Jul 22 Control Scrolling with CSS Scroll Snap #Jul 21 Control rendering using CSS content-visibility property #Jul 21 How to use @supports rule in CSS?
You might also like these
All possible ways you can Insert Data in PostgresPostgresThe order Property in Flex Items in CSSCSSDebugging in WordPress Part 1: WP_DEBUGWordPressHow to make a web page look good on any device?HTMLThe :last-of-type selectorCSSAll different methods for accessing elements in the DOM using JavaScriptJavaScript