다음 요소에 특정 클래스가있는 경우에만 스타일을 적용하는 방법은 무엇입니까?

Question

마크 업 :

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

은 어떻게 추가합니까 .active은 다음 형제 첫 번째 .divider 경우에만 스타일?

나는 .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 */ 
} 

이 li

의 첫 번째 자식 인 경우에, 당신은 c를 ul.class_name li:first-child을 사용하고 있지 않다면 nth-of-type(n)을 사용하고 li의 n 번째 숫자를 n으로 대체하십시오. 이렇게하면 클래스를 호출 할 필요가 없습니다. 예를

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

를 들어

위의 선택은 지정된 클래스 이름으로 ul 요소의 2nd 아이를 선택합니다.

---

CSS에 만족하지 않습니까? 당신은 JS/jQuery를 솔루션을 선택할 수 있지만, 마크 업이 정적 인 경우, 당신이 nth를 사용하도록 제안하고 액세스 할 수있는 경우 마크 업 할 수 있습니다 당신이 스타일을 원하는 요소이어야 호출 클래스 ..

---

참고 : 당신은 li 직접 아이로 둥지 li 태그는

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

Answer 2

그것은 해킹 .. 아래에 마크 업을 변경하는 것을 고려하지만,이 수 당신을 위해 작업을 할 수 없습니다

,387,

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를

입니다