DEV Community

:where :is CSS?

Mustapha Aouas on October 10, 2022

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 the...

Read full post

Thomas Bonnet • Oct 10 '22

Very cool illustrations!

Mustapha Aouas • Oct 10 '22

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

Roneo.org • Oct 10 '22

interesting topic, lovely illustrated, thanks!

Mustapha Aouas • Oct 10 '22

Thank you 🙏🙏

Amir-cahyadi • Oct 10 '22

Useful 👍👍❤️

Mustapha Aouas • Oct 10 '22

Thank you kind sir!

Amir-cahyadi • Oct 10 '22

👍

GreggHume • Oct 11 '22

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;
  }
}

Mustapha Aouas • Oct 11 '22 • Edited

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

GreggHume • Oct 11 '22

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.

Matt Cosentino • Oct 11 '22

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.