DEV Community

Cover image for CSS :is(),:where(),:has() and :not()

CSS :is(),:where(),:has() and :not()

Shubham Tiwari on November 23, 2022

Hello Guys today i will be discussing about some new Css pseudo class selectors Note - Before using these selectors check out their browser suppor...
Collapse
 
danwalsh profile image
Dan Walsh

Great write up! 😊

It’s worth noting that, while the :has() relational pseudo-class selector has (pun intended) broad support across Chromium browsers (Chrome, Edge, Opera), the selector is still locked behind a flag in Firefox (see caniuse.com).

Depending on your project requirements and/or your intended user-base, it might be worth reconsidering using that one in production (for now).

Collapse
 
shubhamtiwari909 profile image
Shubham Tiwari

Yeah i forget to mention the browser support for all , will fix this now
Thank you for mentioning

Collapse
 
lubiah profile image
Lucretius Biah

You need to explain the is and where really well. There's more explanation to what you provide.

Collapse
 
shubhamtiwari909 profile image
Shubham Tiwari

I will explain each one of the them when I create more examples of those with better explaination
If you have any specific article which is good to learn these selectors deeply,please share it in the comment section
Thank you

Collapse
 
lenkacizkova profile image
lenka-cizkova • Edited

You can find an example explaining the difference between :where and :is at developer.mozilla.org/en-US/docs/W....

Collapse
 
jcsmileyjr profile image
JC Smiley

Awesome write up

Collapse
 
shubhamtiwari909 profile image
Shubham Tiwari

Thank you

Collapse
 
mcmohancycle profile image
Gaurav

Hey, Shubham. It was a really insightful blog. I have saved it for future reference.

Collapse
 
hassanweb22 profile image
Hassanweb22

why

Collapse
 
shubhamtiwari909 profile image
Shubham Tiwari

Thank you πŸŽ‰

Collapse
 
husienadel profile image
Husien Adel

Great explanation , fav for future use :)

Collapse
 
shubhamtiwari909 profile image
Shubham Tiwari

🀠πŸ€