Изменить цвет фона родительского элемента на основе дочернего элемента

Я хочу изменить фоновый цвет класса navbar-header, когда элемент привязки a имеет класс active.Изменить цвет фона родительского элемента на основе дочернего элемента

МЕНЮ ОТКРЫТЫЙ

<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>

МЕНЮ 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>

Я попробовал несколько вещь, это didnot работу.

как

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

Возможно ли это с помощью CSS только я не хочу использовать JQuery для этого.

источник

2016-04-26 Learning

Вы спрашиваете [Есть ли CSS родительский селектор?] (Http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) –

Я же пример, но это работает – Learning

Ну да, как говорится в ответе: «С 2015 года это невозможно в любом браузере». –

Вы можете использовать CSS свойство absolute/relative поведения , если ваш окончательный код не взаимодействует с ним:

Идея заключается в том, чтобы заложить абсолютный positionned псевдо элемент из ребенка в статическом положении родителя который находится в относительном положении для ссылки.

псевдоэлемент затем используется, чтобы нарисовать фон, на котором скрывается исходный фон.

.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>

источник

2016-04-26 13:11:23

Изменить цвет фона родительского элемента на основе дочернего элемента

ответ

Смежные вопросы