You can now select parents in CSS with :has

Traditionally in CSS, you could only select child items. That have all changed with the :has selection and you can now select parents as well
:has
Traditionally you had to find the child item or item directly and then do somethingSo if you wanted to only do something on article pages, you had to often write a bit of code to ensure it was done correctly
Now with :has, you can check if example article exist and if so, do something
Next level
With the use of :has, you can even affect other areas than where you are locatedAbove snippet checks if anyone is hovering .article-card under .content_layout. If true, it will find .article-card's that are not being hovered and lower brightness on them
An example from our homepage, where we use this exact feature. We dim slight the articles that are not hovered, to better highlight where you are
When :has is not supported
If :has is not supported, the code will not be executed as the browser will not be able to check itWe use :has on for top padding on mobile devices, to make our logo slight overlap the top image on the frontpage and in articles. All other pages it will just stay on top, without overlapping
If the browser do not support :has, the top padding will not be adjusted and there will be spacing between the logon and text. So here we recommend designing with focus first if it's not supported and then add :has on top and then do something. Especially if you plan to support older browsers
Supported browser
:has is a fairly new release, but it's getting quick traction and most major browser already support it, in their latest stable releaseBrowser | Supported from version |
Chrome | 105+ |
Edge | 105+ |
Safari | 15.4 |
Firefox | Not Supported |
Opera | 91+ |
IE | Not Supported |
Chrome for Android | 107 |
Safari on iOS | 16.1 |
Samsung Internet | Not Supported |
Check out Can I Use [↗] for up-to-date browser support