DEV Community

Cover image for :where :is CSS?

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

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
 
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
 
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
 
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
 
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
 
nikhil_kumar_46ba34714d71 profile image
Nikhil Kumar

👏👏

Collapse
 
jeunetom profile image
RiddleTom

Another banger content by Mustapha

Collapse
 
mustapha profile image
Mustapha Aouas

Thank you Tom. Means a lot 🤜🤛

Collapse
 
ahamsammich profile image
Andre Hammons

Thank you for that explanation!

Collapse
 
mustapha profile image
Mustapha Aouas

My pleasure. Glad you liked it

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!

Collapse
 
sampadsarker profile image
Sampad Sarker

great explanation!!!

Collapse
 
fruntend profile image
fruntend

Сongratulations 🥳! Your article hit the top posts for the week - dev.to/fruntend/top-10-posts-for-f...
Keep it up 👍

Collapse
 
thg_adept profile image
Thaigo Gomes

An amazing explanation for sure.

Collapse
 
sas2k profile image
Sasen Perera

Nice illustrations, did you made it by hand or is there a software or website that creates them?