DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for :where :is CSS?
Mustapha Aouas
Mustapha Aouas

Posted on

:where :is CSS?

In this post we will talk about the not so new functional pseudo-class selectors :is() and :where().

We will see how they work in details, how they differ and when to use them to get the most out of these CSS features.

Β 

1. CSS :is

Let's start by the :is() pseudo-class selector. Then we will talk about :where() and the difference between them.

What is :is()?

Originally named :matches() and :any(), :is() is a functional pseudo-class selector. Meaning it is a keyword recognized by CSS that consists of a colon (:) followed by the pseudo-class name and a pair of parenthesis to define the arguments.

:is() takes as an argument a selector list separated by a comma and selects any element that can be selected by one of the selectors in that list. Let's see some use-cases.

Targeting parents

Suppose that we need to set the font-size of every paragraph element (<p>) located in a <section> or an <article>, we can use :is() to write that in a more compact form:

Image 2

Of course, in this example, we only removed one line, but we'll see later that we can remove much more using this to write more compact code.

Targeting children

Now let's say we need to target every <b> and <strong> inside an <article> to set their font-weight property, here's how we can use :is() to do it:

Image 3

ℹ️ Note
Notice the space between article and :is. It's important to keep it. We will talk about it further in the post.

Combining multiple :is()

If we wanted to target every every <b> and <strong> located inside a p or span that is located inside an <article> or a section it would look like this:

Image 4

In the example above we can see that it makes the code much more concise. It also makes it more readable and easier to maintain in my opinion.

Applying is() to the current element

Like we saw before, the space between before :is() is important. If we remove it, to have something like this: article:is(b) we would be asking for an article element that is also a b element witch is impossible.

We could use :is() to check if an element is for exemple the first-child or last-child in witch case we don't put the space before the :is():

Image 5

ℹ️ Note
:is() does not select pseudo-elements. Meaning some-element:is(::before, ::after) will not work.

is() is forgiving

Typically, if any of the selectors in a comma-separated list are invalid, all of them will be invalid and the entire expression will fail to match anything. This is not the case while using is():

Image 6

Specificity

:is() takes the specificity of its most specific selector. This means that :is(p, .some-class, #some-id) will have a specificity score of an ID (100 points) and :is(p, .some-class)will have specificity score of a class (10 points).

Image 7

To see why this is important to keep in mind, let's consider the example below:

Image 7.5

The rectangle above is orange because the specificity score of .wrapper .rect is 20 while the specificity score of :is(.rect, #some-id) is equal to the specificity of its most specific selector which is #some-id (100 points).

Β 

2. Every :where

Now that we are familiar with the is() pseudo-class selector, let's talk about where().

What is :where()?

where() is also a functional pseudo-class selector and works like is(). It takes as an argument a selector list separated by a comma and selects any element that can be selected by one of the selectors in that list. We can use it to target elements like we did with is() and it is also forgiving.

So why does it exists if it works the same as is()?
Well, because it doesn't work exactly the same.

The difference

The only difference is that the specificity of :where() is always zero. That's it.

So, if we take our previous examples, :where(p, .some-class, #some-id) will have a specificity score of zero. The same for :where(p, .some-class).

Image 8

When to use it?

Every time you want to keep the specificity low, which I think is a good thing to do most of the time.
So, for example, using :where() you can easily target an element by its ID without messing the specificity.

Β 

Browsers compatibility

Both these functional pseudo-class selectors are supported by all evergreen browsers:
Browsers compatibility
source πŸ”—

Β 
Β 

Wrap up

That's it for this post. We saw how to use :is & :where and the difference between them. But before you go and rewrite your entire CSS code base, remember that readability is what your team is used to, so it might be a good idea to discuss this before :)

Cheers!

Top comments (41)

Collapse
 
thomasbnt profile image
Thomas Bnt

Very cool illustrations!

Collapse
 
mustapha profile image
Mustapha Aouas

I'm glad you liked them! Thanks for the feedback Thomas.

Collapse
 
roneo profile image
Roneo.org

interesting topic, lovely illustrated, thanks!

Collapse
 
mustapha profile image
Mustapha Aouas

Thank you πŸ™πŸ™

Collapse
 
zerooeffect profile image
Damon Cahill

Thank you heaps. I've literally never used :is or where before. Going to try it out!

Collapse
 
amircahyadi profile image
Amir-cahyadi

Useful πŸ‘πŸ‘β€οΈ

Collapse
 
mustapha profile image
Mustapha Aouas

Thank you kind sir!

Collapse
 
amircahyadi profile image
Amir-cahyadi

πŸ‘

Collapse
 
greggcbs profile image
GreggHume

I mean :is seems frivolous? I get that its a one liner in css, but in sass probably not and who is writing in plain css anyways?

Here are the different ways of writing this:

/* plain css */
.parent {
  position: relative;
}
.parent :is(p, article) {
  background: orange;
}

/* scss 1 */
.parent {
  position: relative;

  :is(p, article) {
    background: orange;
  }
}

/* scss 2 */
.parent {
  position: relative;

  p, article {
    background: orange;
  }
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
mustapha profile image
Mustapha Aouas • Edited on

I guess that's the least useful way to use it with sass but just to be clear I'm not advocating the use of :is() or :where(). Use what works best for you πŸ‘
Also, I would say a lot of people are writing in plain CSS. It could be nice to have a global metric on this tho

Collapse
 
greggcbs profile image
GreggHume

Yeah thanks, putting the example for others to see as I found it interesting. I didn't know :is existed so was interesting to learn about!

Its hard to tell which is used more, here are some npm metrics on sass packages for fun:
node-sass has 3,075,362 weekly downloads.
sass has 9,050,002 weekly downloads.
sass-loader has 11,673,625 weekly downloads.

Collapse
 
mattcoz profile image
Matt Cosentino

Ok, but what about combining multiple :is selectors? Can't do that in SASS. Also, the :is selector is forgiving of unsupported selectors. Can't say that about SASS.

Collapse
 
greggcbs profile image
GreggHume

@mattcoz because you didn’t tag me I didn’t get notified of your comment, so I’m a little late here. Could you give me an example of what you mean?

Thread Thread
 
mattcoz profile image
Matt Cosentino

Examples were given in the article.

Collapse
 
ediomojose profile image
Ed_Jose

Nice illustration

Collapse
 
zakariya09 profile image
Zakariya Khan

Nicely explained, I’ll try this for sure.

Collapse
 
mustapha profile image
Mustapha Aouas

Thanks Zakariya!
Glad to hear that

Collapse
 
hassan_dev91 profile image
Hassan

That's awesome

Collapse
 
mustapha profile image
Mustapha Aouas

Thank you Hassan!

Collapse
 
mathesouzaf profile image
Matheus de souza

Simplified a lot with the illustrations

Collapse
 
mustapha profile image
Mustapha Aouas

Thanks for the feedback Matheus πŸ™
Happy to hear that!

Collapse
 
thinhdev97 profile image
thinhdev97

Thanks! It’s helpful and easy to understand.

Collapse
 
ooling profile image
Sam oo LΓ­ng

very nice!

Collapse
 
dev_geos profile image
dev-geos

Thnaks for all. Good article

Collapse
 
raphaelnk profile image
RaphaΓ«l RANJAKASOA

Thanks for the lesson, it's so helpful

Collapse
 
mustapha profile image
Mustapha Aouas

πŸ™πŸ™

Collapse
 
ahmadalkhalil profile image
ahmad-alkhalil

great

Collapse
 
pire_to_pire profile image
Antoine

Nice ! I like the illustrations, it really helps to understand easily.
Thanks for this post

Collapse
 
mustapha profile image
Mustapha Aouas

Thanks for the feedback Antoine I appreciate it!

Build Anything...


Use any Linode offering to create something for the DEV x Linode Hackathon 2022. A variety of prizes are up for grabs, inculding $1,000 USD. πŸ‘€

β†’ Join the Hackathon <-