:where() :is() — A New CSS

Write a cleaner CSS with :where() and :is() pseudo-classes

Photo by Joshua Aragon

If you haven’t heard about the :where() and :is() pseudo-classes,
don’t feel bad. They were only recently introduced to most browsers.
But they just might be your new favorite thing in vanilla CSS!

In this article, we will learn how to use our new handy tools in writing CSS.

:is()

Think about when you want to apply the same styling to multiple elements in your HTML. You’d probably end up with something that looks like this:

.main h1,
.main h2,
.main .heading, {
  line-height: 1.2;
}
.nav li,
.nav p {
  padding: 5px 10px;
}

With :is() we can write our CSS in a shorter, quicker, and more elegant way.

.main :is(h1, h2, .heading){
  line-height: 1.2;
}
.nav :is(li, p) {
  padding: 5px 10px;
}

Imagine all the many lines you’re saving!
This is very similar to how nesting works with preprocessors such as SCSS.

The pseudo-class function :is() (AKA “Matches Any”) takes a selector list and selects any element that can be selected by one of the selectors in that list.
It can also be chained with other selectors such as :not() , :firstchild() etc.

:where()

Just like :is(), :where() takes a selector list as its argument and selects any element that can be selected by one of the selectors in that list.
Our code from before:

.main h1,
.main h2,
.main .heading, {
  line-height: 1.2;
}
.nav li,
.nav p {
  padding: 5px 10px;
}

After using :where():

.main :where(h1, h2, .heading){
  line-height: 1.2;
}
.nav :where(li, p) {
  padding: 5px 10px;
}

“Wait, this looks exactly the same!”

Yes, you’re right.

So what’s the difference?

Specificity.

:is() takes the specificity of its most specific selector.
:where() has a specificity of 0.

It’s important to keep this small yet very important detail in mind when you’re using :is() and :where() in your code to avoid blocking yourself from applying CSS changes in other places.

As someone that is used to using a preprocessor and nesting, I was really happy to see these two functions being implemented into CSS.

Most browsers already support them, and I heartily recommend you start getting used to using them and make your code cleaner and faster to write!