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

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

Posted on • Updated on

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

Hello Guys today i will be discussing about some new Css pseudo class selectors

Note - Before using these selectors check out their browser support at
https://caniuse.com/

Let's get started...

HTML -

<div class="parent">
<p class="element1">Element 1</p>
<p class="element2">Element 2</p>
<p class="element3">Element 3</p>
<p class="element4">Element 4</p>
</div>
Enter fullscreen mode Exit fullscreen mode

CSS -

  • :is() - Sometimes you have to provide the same styling to multiple elements , so you might do it like this
.element1,.element2,.element3,.element4{
color:red;
}
Enter fullscreen mode Exit fullscreen mode

It creates a chaining and sometimes can be long enough, but with :is() selector , now you can do it like this

:is(.element1,.element2,.element3,.element4){
color:red;
}

//if the element has a parent then do it like this
.parent :is(.element1,.element2,.element3,.element4){
color:red;
}
Enter fullscreen mode Exit fullscreen mode

NOTE - remember to give a space before the :is() selector always if you are using it with a parent element like above.

  • :where() - This selector also works same as :is(), the difference lies in the specificity, :is() takes the specificity of the elements which has higghest specificity in the group, :where() has a 0 specificity no matter how many elements grouped together
.parent :where(.element1,.element2,.element3,.element4){
  color:red
}
Enter fullscreen mode Exit fullscreen mode

NOTE - remember to give a space before the :where() selector always if you are using it with a parent element like above.

  • :has() - This selector simply checks the presence of some element using its class , Id , tagName etc.
<div class="parent">
  <input type="checkbox" />
  <p>Child</p>
</div>
Enter fullscreen mode Exit fullscreen mode
.parent:has([type="checkbox"]:checked) p{
  color:red
}
Enter fullscreen mode Exit fullscreen mode

It will check whether the parent element has an input with type checkbox and it is checked , if it is checked , the color of p tag will be red , else it will be default black.

NOTE - In case of :has() you don't need to provide a space before it , you can see it in the example above

  • :not() - This selector is used to style all the elements except the one which is inside the parameter of :not()
// Inside the parent element it will provide the color red to all p elements except the last child or last p element inside that parent element
.parent :not(p:nth-last-child(1)){
  color:red;
}
Enter fullscreen mode Exit fullscreen mode

NOTE - remember to give a space before the :not() selector always if you are using it with a parent element like above.

THANK YOU FOR CHECKING THIS POST

You can contact me on -
Instagram - https://www.instagram.com/supremacism__shubh/
LinkedIn - https://www.linkedin.com/in/shubham-tiwari-b7544b193/
Email - shubhmtiwri00@gmail.com

^^You can help me by some donation at the link below Thank youπŸ‘‡πŸ‘‡ ^^
β˜• --> https://www.buymeacoffee.com/waaduheck <--

Also check these posts as well
https://dev.to/shubhamtiwari909/js-push-and-pop-with-arrays-33a2/edit

https://dev.to/shubhamtiwari909/tostring-in-js-27b

https://dev.to/shubhamtiwari909/join-in-javascript-4050

https://dev.to/shubhamtiwari909/going-deep-in-array-sort-js-2n90

Top comments (12)

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
Mysterio

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

Collapse
 
kudadam 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
Mysterio

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 on

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
Mysterio

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
Mysterio

Thank you πŸŽ‰

Collapse
 
husienadel profile image
Husien Adel

Great explanation , fav for future use :)

Collapse
 
shubhamtiwari909 profile image
Mysterio

🀠🀠

Forem

πŸ— We built a 100% open source community software called Forem.

Β 
You can contribute to the codebase or host your own.