Как применить стиль только в том случае, если следующий элемент имеет определенный класс?

Question

Markup:

<li class="divider"></li> 
<li class="active"><a href="#">Home</a> 
<li class="divider"></li> 
<li><a href="#">Blog</a></li> 

Как добавить стиль первый .divider только если .active это следующий брат?

Я думал о .divider + .active, но это применило бы стили к .active.

.divider { 
    border-left: 1px solid #d0d0d0; 
} 
.active { 
    background: #fff; 
} 
// when the next sibling is .active, border-color: transparent; 

Answer 1

Вы не можете выбрать предыдущий элемент в CSS, как сейчас, что вы можете сделать либо вручную целевой класс, предоставляя некоторый отдельный класс к нему, как

<li class="divider target_me"></li> 

И чем просто использовать

ul.class_name li.target_me { 
    /* Styles goes here */ 
} 

Else, если это первый ребенок li

вы с использование ul.class_name li:first-child, если это не так, просто используйте nth-of-type(n), замените n на n-й номер вашего li, так что вам не нужно также вызывать классы.

Например

ul.class_name li:nth-of-type(2) { 
    /* Styles here */ 
} 

выше селектор будет выбирать 2nd ребенка ul элемента с указанным именем этого класса.

---

По-прежнему недовольны CSS? Вы можете выбрать для решения JS/JQuery, но если разметка является статическим, я хотел бы предложить вам использовать nth и если у вас есть доступ к разметке вы можете по крайней мере класс вызов на элемент, который вы хотите стиль ..

---

Примечание: Вы не можете гнездо li тег в качестве прямого потомка к li, рассмотреть вопрос об изменении разметки ниже ..

<ul> 
    <li> 
     <a href="#">Home</a> 
     <ul> 
      <li>Sub</li> 
     </ul> 
    </li> 
</ul> 

Answer 2

это хак, но это может работа для вас:

<div class='third'>third</div> 
<div class='second active'>second</div> 
<div class='first'>first</div> 

div { 
    color: black; 
    float: right; 
} 

.active + .first { 
    color: pink; 
} 

Fiddle

Answer 3

CSS не имеет прямой поддержки этого, как сейчас, но JQuery делает его относительно безболезненно, и при условии, что это требование для вашего проекта, вполне может быть путь.

В JQuery было бы написано что-то вроде этого:

if element.next().hasClass('active'){ 
    element.addClass('divider') 

Answer 4

Вот Fiddle

CSS

.divactive { 
    border-left: 1px solid transparent; 
} 

JQuery

$(function() { 

    $('.active').prev('.divider').addClass('divactive'); 

    //or 

    $('.active').prev('.divider').css({ 'border-left': '1px solid transparent' }); 

});