인접한 형제가없는 항목에 대한 SASS/CSS 선택 도구가 있습니까?

Question

<li> 클래스 "foo"가있는 요소의 상단 테두리를 "bar"클래스의 <li> 요소의 인접 형제가 아닌 곳에 배치하려고합니다.

"인접 형제가 없으면 [x]"SASS/CSS 선택기가 있습니까? 또는 두 가지 규칙, 하나는 상단 테두리를 모두 <li class="foo">에 추가하고 다른 하나는 옆에있는 <li class="bar"> 옆에서 제거하는 유일한 방법입니까? 내가 corretly undersdood 때

Answer 1

, 당신이 갖고 싶어 :

http://jsfiddle.net/gECc9/

HTML을

<ul> 
    <li class="bar">Bar</li> 
    <li class="foo">foo</li> 
    <li class="foo">foo</li> 
    <li class="foo">foo</li> 
    <li class="foo">foo</li> 
    <li class="bar">Bar</li> 
    <li class="foo">foo</li> 
    <li class="foo">foo</li> 
    <li class="foo">foo</li> 
    <li class="foo">foo</li> 
</ul> 

CSS :

li:not(.bar)+li.foo 
{ 
    border-top: 1px solid blue; 
} 

선택기 각 <li class="foo">을 선택 그것은 아니다 인접한 형제 인 <li class="bar">

이 선택기는 단 하나의 선도가 필요하다는 약점이 있습니다 (<li>). 첫 번째 항목이 <li class="bar">이 아닌 항목은 제외됩니다. 이것은 여기에 본처럼 해결 될 수 있습니다

http://jsfiddle.net/gECc9/1/

li:not(.bar)+li.foo, 
li.foo:first-child 
{ 
    border-top: 1px solid blue; 
} 

P.S.을 목록 안에 항목을 그룹화하려면 정의 목록 <dl> 또는 중첩 목록을 사용할 수도 있습니다. 이렇게하면 이러한 문제를 예방할 수 있습니다.