Czy istnieje selektor SASS / CSS dla elementów BEZ konkretnego sąsiedniego rodzeństwa? - css, css3, sass, css-selektory, rodzeństwo

Chcę umieścić górną granicę na wszystkich <li> elementy z klasą "foo", które NIE są sąsiednim rodzeństwem a <li> element z klasą "bar".

Czy istnieje selektor SASS / CSS "bez sąsiedniego rodzeństwa [x]? Lub jest to jedyny sposób na osiągnięcie tego poprzez dwie reguły, jedną, aby dodać górną granicę dla wszystkich <li class="foo">s i inny, aby zabrać go od <li> obok <li class="bar">?

Odpowiedzi:

Kiedy dobrze się zgadzam, chcesz mieć to:

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

Selektor, który wybiera każdy <li class="foo"> to nie sąsiadujące rodzeństwo <li class="bar">

Ten selektor ma tylko słabość potrzeby jednego prowadzącego <li>. Jeśli pierwszy element nie jest <li class="bar"> przedmiot zostanie pominięty. Można to rozwiązać, tak jak tutaj:

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

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

P.S. gdy chcesz grupować elementy na liście, możesz również użyć list definicji <dl> lub zagnieżdżone listy. To może zapobiec takim problemom.