CSS :is(),:where(),:has() and :not()
Tags: html, css, webdev, beginners
Published: 2022-11-23 10:28:20

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 - 
```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
```css
.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
```css
: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;
}
```
{% codepen https://codepen.io/shubhamtiwari909/pen/eYKMmWP %}
#### 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

```css
.parent :where(.element1,.element2,.element3,.element4){
  color:red
}
```
{% codepen https://codepen.io/shubhamtiwari909/pen/vYrRKdP %}
#### 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.
```html
<div class="parent">
  <input type="checkbox" />
  <p>Child</p>
</div>
```
```css
.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.
{% codepen https://codepen.io/shubhamtiwari909/pen/GRGxjRJ %}
#### 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()

```css
// 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;
}
```
{% codepen https://codepen.io/shubhamtiwari909/pen/QWxmEVG %}
#### 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