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.


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

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
Learn how to give a temporary name to a column or to a table using SQL AliasesSQL/MySQLHow to define variables in SCSS (Sass)?SCSSLearn to Implement Estimated Reading Time using PHP Part 1: The BasicsPHPHow to vertically and horizontally align text and image block (without flex or grid) in CSS?CSSHow to embed YouTube or other video links in WordPress?WordPressHow to deploy Angular App on Dreamhost or Amazon S3 or firebase?Angular