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