CODEWITHSUNDEEP
csssasscss-selectorssiblings
beth
beth

Reputation: 1996

Is there a SASS/CSS selector for items WITHOUT a particular adjacent sibling?

I want to put a top border on all <li> elements with class "foo" that are NOT an adjacent sibling of a <li> element with class "bar".

Is there a "without adjacent sibling [x]" SASS/CSS selector? Or is the only way to accomplish this via two rules, one to add the top border to all <li class="foo">s and another to take it away from the <li> next to <li class="bar">?

Upvotes: 1

Views: 339

Answers (1)

Nico O
Nico O

Reputation: 14142

When i undersdood corretly, you want to have this:

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

The selector that selects each <li class="foo"> that is not an adjacent sibling of <li class="bar">

This selector has only the weakness of needing one leading <li>. If the first item is not a <li class="bar"> the item will be left out. This can be addressed like seen here:

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

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

P.S. when you want to group items inside a list you could also use definition lists <dl> or nested lists. This could prevent problems like these.

Upvotes: 1

Related Questions