CODEWITHSUNDEEP
htmlcss
Dawn17
Dawn17

Reputation: 8297

How do I conditionally set a css style based on its children elements?

I have a class that is used in multiple divs

<div class="wrapper">
    <div class="child1">
        ...
    </div>
</div>
<div class="wrapper">
    <div class="child2">
        ...
    </div>
</div>
<div class="wrapper">
    <div class="child3">
        ...
    </div>
</div>

Here, I want to add a style (let's just say color: red) to the wrapper class that has child2 as its child. I want to do this based on the name, not the order of the child. Any thoughts?

Upvotes: 0

Views: 1196

Answers (1)

Naveen Sivasankar
Naveen Sivasankar

Reputation: 11

Right now, you can only achieve the behaviour you want using JavaScript.

Use JavaScript to select all .wrapper > .child2 elements and set the style of the parent wrapper element to what you want.

However, it might eventually be possible with CSS thanks to the :has pseudo-class. It is not currently supported by any major browsers but that could change soon!

Upvotes: 1

Related Questions