Kevin Powell - Community•2mo ago

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

ἔρως•2mo ago

:has(> .mobile-menu.menu-open) https://developer.mozilla.org/en-US/docs/Web/CSS/:has just use that in css

MarkBoots•2mo 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 }

Gaming

Programming

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