Change background color of parent item based on child item

Question

I want to change the background-color of navbar-header class when anchor element a has class active.

MENU OPEN

<div class="navbar-header">
    <a class="navbar-toggle active" data-target=".navbar-collapse" data-toggle="collapse"  href="#" aria-expanded="true">
        <ul class="bar-icon-wrapper">
            <li class="bar-icon"></li>
            <li class="bar-icon"></li>
            <li class="bar-icon"></li>
        </ul>
    </a>
</div>

MENU Collapsed

<div class="navbar-header">
    <a class="navbar-toggle collapsed" data-target=".navbar-collapse" data-toggle="collapse"  href="#" aria-expanded="false">
        <ul class="bar-icon-wrapper">
            <li class="bar-icon"></li>
            <li class="bar-icon"></li>
            <li class="bar-icon"></li>
        </ul>
    </a>
</div>

I tried few thing, it didnot work.

like

.navbar-header:has( a.active) { backbround-color:red;}

Is this possible with CSS only as i dont want to use jQuery for this.

Are you asking [Is there a CSS parent selector?](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) — James Donnelly, Apr 26 '16 at 12:38
Well yeah, as the answer states: "As of 2015, this is not available in any browser.". — James Donnelly, Apr 26 '16 at 12:40

score 1 · Answer 1 · answered Apr 26 '16 at 13:11

You may use CSS properties of absolute/relative behavior if your final code doesn't interact with it :

The idea is to lay an absolute positionned pseudo element from a child in static position to the parent which is in relative position to be the reference.

the pseudo element is then used to draw the background hover the initial background being hidden.

.navbar-header {
  background:red;
  position:relative;
}
.active ul{/* you want to see the menu :) */
  position:relative;
  z-index:1;
}
.active:before {
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:lime;
}

<div class="navbar-header">
    <a class="navbar-toggle collapsed" data-target=".navbar-collapse" data-toggle="collapse"  href="#" aria-expanded="false">
        <ul class="bar-icon-wrapper">
            <li class="bar-icon">non a.active child</li>
            <li class="bar-icon">non a.active child</li>
            <li class="bar-icon">non a.active child</li>
        </ul>
    </a>
</div>
<div class="navbar-header">
    <a class="navbar-toggle active" data-target=".navbar-collapse" data-toggle="collapse"  href="#" aria-expanded="true">
        <ul class="bar-icon-wrapper">
            <li class="bar-icon">a.active child</li>
            <li class="bar-icon">a.active child</li>
            <li class="bar-icon">a.active child</li>
        </ul>
    </a>
</div>

Change background color of parent item based on child item

1 Answers1