How to select a parent of a css class?
Issue
I want to add styles to all the <div> elements that contains a child element with a specific CSS class (child-class in the example).
Is there a way to select parent elements with native CSS?
<div>
<span class="child-class"></span>
</div>
Solution
Yes, there is a new CSS :has pseudo-class that allows selecting parent elements based on children classes
div:has(> .child-class-name) {
//add parent style here
}
This will allow you to add styling to the parent div without using any javascript
Have a look at :has documentation for browser compatibility info