KPC
Kevin Powell - Community•9mo ago
Entity808

Possible to change opacity on child elements based on parent sibling selector?

<header> <div class="menu"> <div class="overlay"></div> <div class="blur"></div> </div> <div class="mobile-menu"></div> </header> How would I go about changing the opacity of overlay and blur, only when <div class="mobile-menu"></div> becomes <div class="mobile-menu menu-open"></div>? Or is it just better to use JavaScript for this?
2 Replies
ἔρως
ἔρως•9mo ago
:has(> .mobile-menu.menu-open) https://developer.mozilla.org/en-US/docs/Web/CSS/:has just use that in css
MarkBoots
MarkBoots•8mo ago
if you don't want to use :has() yet and if you are able to swap .menu and .mobile-menu in the html 
<div class="mobile-menu"></div>
<div class="menu">
    <div class="overlay"></div>
    <div class="blur"></div>
</div>
<div class="mobile-menu"></div>
<div class="menu">
    <div class="overlay"></div>
    <div class="blur"></div>
</div>
.mobile-menu.menu-open + .menu > * { opacity: 0 }
.mobile-menu.menu-open + .menu > * { opacity: 0 }

Did you find this page helpful?