Now CSS Has :has(),The Mind-blowing Feature
Tags: webdev, css
Published: 2022-10-23 06:03:44

One of the most-awaited features in CSS is :has() functional pseudo-class. It is a level 4 CSS selector.

The `:has()` checks whether an element has a particular child element or group of child element in its arguments and based on that a certain style is applied.

**On Which Part of :has(), Style Will Be Applied ?**
The :has() is more than a parent selector. It is very important to understand which element should be styled by :has().

`section:has(article) { … }`--> "section" element will be styled.
`section:has(article) img { … }`--> "img" element will be styled, not "section" element.

**Few Property of :has()** 
1.The selector list of :has() is forgiving.
2.The specificity of :has() is that of its most specific argument like :is().

Let's take a deep dive🤿 to demystify the :has()

**Selecting Parent Element**
The default behaviour of :has() is to select the parent.
Example code
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/othzpm072wy83bxyc6ft.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7nc5ebf0n7sj24a2905o.png)


**Selecting Child Element**
Selecting the child or direct child.
Example code
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dgoct052iocaom1x866j.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0jt04uq9h7rnvtm3l8fv.png)


**Grouping of Multiple Children**
Selecting more than one child at a time.
Example code
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o59egz6j3equy7jdbbeq.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cose8thfdb9mz2c79jf0.png)


**Selecting the Previous Sibling Element**
Selecting the Previous Sibling Element is possible by combined use of CSS adjacent sibling combinator with the :has(). 
Example code
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1725nzlq76kgsul3x7h6.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i52qmsgohdpooxihsh2v.png)


**Conditional Decorations**
Based on child element under any condition, different style can be applied.
Example code
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1wb8oj4210uuf7uflgwd.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tt9y7nq1ppylapsby4g6.png)


**Styling Empty States**
It is possible to style elements that contain nothing using :empty and :has() together very easily.
Example code
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t9dqb91i4o396iimxujz.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1oslq0i1ep15wsl1wx2b.png)


**Layout Customize**
Layout can be changed according to child element with or without condition.
Example code
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w8yrxujdfo9utzcx5374.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o2u7g37ych8j6i3p97sh.png)


**Change Theme Without Js**
Theme mood toggle Without JS, it is possible now for the pseudo-class ":has()". You should thank this CSS feature, shouldn't you?
Example code
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ifrn5jnkt0zfmdl6gb93.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3bweu2ac3n00u19uts0b.png)


**Browser Support Check**
At the time of publishing this post, the :has() achieves global 76.16% of browser support. Few browser didn't adopt it(Firefox is one of them 😟).I hope, it will be supported 100% by all browsers.
Example code
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yfibzud4tbdcqxieyt1n.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ikfj0253qgrkdnjjol0.png)

**Caution**
⚠ The :has() pseudo-class can not be nested within another :has().
⚠ The :has() does not take any pseudo-elements in its argument.

All examples' live code [here](https://codepen.io/sampad-sarker/pen/BaxEypE)⤵
{% codepen https://codepen.io/sampad-sarker/pen/BaxEypE %}
 
Thanks for reading all the way through 🎉🥳🎈. 
I hope you learned something new from this post. Feel free to leave your comments, advice, and suggestions so that I'll publish better posts in the future.