All about the new :is() and :where() selectors in CSS

Let's discover together the latest selectors introduced by CSS: :where() and :is()! These selectors will allow us to reduce our code and select our elements more flexibly. How does it work? That's everything we'll cover in this article.

The Problem with Our Selectors

When coding in the style sheets of our projects, you've surely already encountered results like this:

.main h1,
.main h2,
.main .leading {
    color: pink;
}

.nav li,
.nav p {
    padding: 15px;
}

This kind of selectors isn't impressive; it allows us to specify multiple elements to select and style using a comma, nothing more, nothing less.

We generally use this kind of code when we want to factorize our code so that we don't have to specify the color for each h1, h2, and each leading class manually, one by one. The problem remains that we have very long code across multiple lines.

Thanks to the introduction of the :is() and :where() selectors, this kind of selectors will now be just memories!

The :is() Selector

Think about every moment when you want to apply the same style to multiple elements. With :is(), we can now select all these elements in a shorter, faster, and more intuitive way.

.main :is(h1, h2, .leading) {
    color: pink;
}

.nav :is(li, p) {
    padding: 15px;
}

Quite simple to use, don't you think?

The :is() selector allows us to select multiple elements to target without having to specify the parent elements each time.

The :where() Selector

The :where() selector might... confuse you. And for good reason: it works exactly like the :is() selector and offers more or less the same functionality, but with one key difference.

.main :where(h1, h2, .leading) {
    color: pink;
}

.nav :where(li, p) {
    padding: 15px;
}

But wait, does it really work the same as :is()?

Well yes, nothing changes except that we use where instead of the word is. At least, in the code. Because behind the scenes... that's another debate!

The :where() selector allows us to select multiple elements to target without having to specify the parent elements each time and without adding specificity to the targeted properties. In other words, a bit deeper without adding specificity to the targeted element.

What is Specificity?

Excellent question!

Specificity is a value that tells the browser which property to prioritize.

Here's a small example:

<div id="text-purple" style="color: pink">Hello Believemy</div>

.text-red {
    color: red;
}

What color do you think the text will be? Purple or pink? Pink, of course.

But how come your browser chose pink instead of red? The answer is simple: thanks to specificity.

By specifying the style attribute, we have informed our browser that it is a property to prioritize above all others that might—or might not—exist.

Each CSS selector has its own specificity. Thus, if two properties are added to the same element using two different selectors, the one with the higher specificity will always win.

Here is the hierarchy between each type of selector:

1. Inline styles with the style attribute (1000 specificity points);
2. An ID (#id) (100 points);
3. A class (.class), an attribute (input[attribute]), or a pseudo-class (input:hover) (10 specificity points);
4. An element (input), a pseudo-element (input::before) (1 specificity point).

These specificity points can add up to each other.

Thus, we will have:

• 2 specificity points for ul li { ... }
• 14 specificity points for div ul ol li.text-red { ... } (four elements + one class: 4 + 10)

Not to mention !important, which is worth 10,000 specificity points (and allows you to "force" the use of a certain property, hence the interest of the word "important").

If we take the example above, to have the text in red instead of pink, we will need to specify !important:

.text-red {
    color: red!important;
}

Conclusion

The two new selectors: :is() and :where() are very interesting as they allow better targeting of elements and result in cleaner, easier-to-read code.

The only unique difference between these two selectors is that the :where() selector adds no specificity and therefore no specificity points to the targeted elements, whereas :is() uses the specificity of the most specific selector (if you target classes, it will return a specificity of 10, whereas if you target classes and IDs, it will have a specificity of 100).

From now on, you can say that you know everything about :is() and :where(). If you want to learn more about HTML and CSS, we have a comprehensive course dedicated to these two programming languages. Also, feel free to share this article with your network on your social media. Thank you!