选择器li + li麻烦

Question

I use to use a background image usually on my li + li for a little sliver seperator on my nav menu and I was wanting to try to create a separator without a image (horrible explanation).

I previously was using

#header li + li {
    background: url('http://i.imgur.com/IdVT0cL.png') 8px 8px / 1px 10px no-repeat;
    padding-left: 20px;
}

So I tried

#header li + li {
    background: #00B25C 8px 8px / 1px 10px no-repeat;
    padding-left: 20px;
}

And it's highlighting the all the list items except the first one. Why is this? Here's my JSFiddle: http://jsfiddle.net/yhLLb/

Answer 1

If I got you right, you could use css' :before-selector to achieve a separator without using an image:

#navBar li+li:before {
    content: "|";
    /*background: #00B25C 8px 8px / 1px 10px no-repeat;*/
}

See this fiddle: http://jsfiddle.net/yhLLb/2/

Cheers Florian

Answer 2

The answer to your question, why is it highlighting all the list items except the first one, can be explained by the spec for the CSS adjacent selector. http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors

Thus, the following rule states that when a P element immediately follows a MATH element, it should not be indented:

math + p { text-indent: 0 }

This fiddle highlights all of the menu items, not sure if this is what you wanted to achieve though, as #navBar li would suffice, there is no need to select the adjacent element? http://jsfiddle.net/yhLLb/1/

ie

#navBar li, #navBar li + li {
    background: #00B25C 8px 8px / 1px 10px no-repeat;
}

is the same as

#navBar li {
    background: #00B25C 8px 8px / 1px 10px no-repeat;
}

Answer 3

Here is another way that you could do it too.

html

    <div id="navBar">
    <ul>
        <li>Home</li>
        <li>Portfolio</li>
        <li>Contact</li>
        <li class="last">About</li>
    </ul>
    </div>

Css

#navBar {
    margin-right: 20px;
    background: #3840F8;
    float: right;
    line-height: 40px;
    overflow: hidden;
    height: 40px;
}
#navBar ul {
    padding-left: 20px;
    padding-right: 20px;
}
#navBar li {
    text-align: center;
    border-right: 1px solid #888;
    padding: 0 10px;
    line-height: 10px;
    float: left;
    list-style: none;
    color: #fff;
}
#navBar li.last {
     border-right: none;
}

JSFiddle