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

[snippet]article form input: do something[/snippet]

So 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

[snippet]form:has(article) input: do something[/snippet]

Now with :has, you can check if example article exist and if so, do something

Next level

[snippet].content_layout:has(.article-card:hover) .article-card:not(:hover) { filter: brightness(80%); }[/snippet]

Above 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

[snippet]#mainContent:has(#frontpage,#article) { padding-top: 40px; }[/snippet]

We 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

Check out Can I Use [↗] for up-to-date browser support