Hello Guys today i will be discussing about some new Css pseudo class selectors
Let’s get started…
HTML –
class="parent">
class="element1">Element 1
class="element2">Element 2
class="element3">Element 3
class="element4">Element 4
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 specifity, :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.
class="parent">
type="checkbox" />
Child
.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
