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

#html #css #webdev #beginners

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>

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

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

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
}

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>

.parent:has([type="checkbox"]:checked) p{
  color:red
}

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

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)

Dan Walsh • Nov 24 '22

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

Shubham Tiwari • Nov 24 '22

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

Lucretius Biah • Nov 29 '22

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

Shubham Tiwari • Nov 30 '22

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