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 How to add Read More Read Less Button using JavaScript? #3 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #4 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
How to pass arguments in SCSS function?SCSSHow to create a pricing table using flex in CSS?CSSHow to concatenate variable with string in Swift?SwiftFive common features of Angular template syntax (with examples)AngularHow get_template_part helps write reusable code in WordPress?WordPressHow to Draw a Circle in HTML5 Using Canvas Tag?HTML