Gibt es einen SASS / CSS-Selektor für Elemente OHNE ein bestimmtes benachbartes Geschwister? - css, css3, sass, css-Selektoren, Geschwister

Ich möchte allen eine obere Grenze setzen <li> Elemente mit der Klasse "foo", die KEIN benachbarter Bruder von a sind <li> Element mit der Klasse "Bar".

Gibt es einen SASS / CSS-Selektor "ohne benachbarte Geschwister [x]"? Oder dies ist die einzige Möglichkeit, dies durch zwei Regeln zu erreichen, eine, um den oberen Rand allen hinzuzufügen <li class="foo">s und ein anderes, um es aus dem <li> neben an <li class="bar">?

Antworten:

Wenn ich richtig verstanden habe, möchte ich folgendes haben:

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

Die Auswahl, die jeweils auswählt <li class="foo"> das ist kein benachbartes Geschwister von <li class="bar">

Dieser Wähler hat nur die Schwäche, dass er eine Führung benötigt <li>. Wenn das erste Element kein ist <li class="bar"> Der Artikel wird ausgelassen. Dies kann wie hier angesprochen werden:

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

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

P.S. Wenn Sie Elemente in einer Liste gruppieren möchten, können Sie auch Definitionslisten verwenden <dl> oder verschachtelte Listen. Dies könnte Probleme wie diese verhindern.