Css, check next selector for class

Question

I have simple html ul list, with a links in each li, if li tag have selected class on it, i add border to link in it. Also i check if this li is not the last one in my ul list.

All this work i do with simple selector

.advert-list-menu li:not(:last-child):not(.selected) a { border-right: 1px solid #c9c9c9; }

What i need, is to additionaly check if next li tag, also have no selected class, i ve tried to achieve this like this

.advert-list-menu li:not(:last-child):not(.selected) a + li:not(.selected) a { border-right: 1px solid #c9c9c9; }

But no success. Code example on jsfiddle: http://jsfiddle.net/tzgyhdmk/ Here Subscriptions must be without right border.

Answer 1

Simply use an Adjacent Sibling Selector instead. It's easier to understand and has much better support (inc IE7) than CSS3's negation selector (which will fail in <IE9).

.advert-list-menu li:not(:last-child):not(.selected) a { border-right: 1px solid #c9c9c9; }

/* put a left border on all but the first a */
.advert-list-menu li + li a { 
    border-left:1px solid #c9c9c9;
}
/* remove the border on the .selected a and the next one */
.advert-list-menu li.selected a, 
.advert-list-menu li.selected + li a { 
    border:none;
}

http://jsfiddle.net/tzgyhdmk/1/

.advert-list-menu { width: 100%; display: inline-block; padding: 0; line-height: 47px; font-size: 12px; }
.advert-list-menu * { font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12px; }
.advert-list-menu li { display: inline-block; text-align: center; }
/*.advert-list-menu li:not(:last-child):not(.selected) a { border-right: 1px solid #c9c9c9; }*/
    /* put a left border on all but the first a */
    .advert-list-menu li + li a { 
        border-left:1px solid #c9c9c9;
    }
    /* remove the border on the .selected a and the next one */
    .advert-list-menu li.selected a, 
    .advert-list-menu li.selected + li a { 
        border:none;
    }
.advert-list-menu li.selected { font-weight: bold; background: #fff; color: #000; filter: none; height: 55px; position: relative; top: 1px; padding-top: 5px; border: 1px solid #dedede; border-bottom: 0px; }
.advert-list-menu li a { color: inherit; padding: 0 20px; transition: all 200ms ease; line-height: 12px; display: inline-block; vertical-align: middle; }
.advert-list-menu li a:hover { color: #E00C18; text-decoration: none; text-shadow: 0px 0px 5px #fff; }

<ul class="advert-list-menu">
            <li>
                    <a href="#">
                        <div class="icon-u-list"></div>
                        Adverts
                    </a>
            </li>
            <li class="accounts">
                <a href="#">
                    <div class="icon-u-money"></div>
                    Accounts                    <div>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="icon-u-save"></div>
                    Subscriptions
                </a>
            </li>
            <li class="selected">
                <a href="#">
                    <div class="icon-u-hart"></div>
                    Saved
                </a>
            </li>
            <li>
                <a href="#" title="Mano informacija">
                    <div class="icon-user"></div>
                    My information
                </a>
            </li>
        </ul>

Answer 2

You cannot look the following siblings in order to affect the current one.

But you can look the previous siblings.

So i would suggest you change your code to put the border on the left

.advert-list-menu li:not(:first-child):not(.selected) a{ border-left: 1px solid #c9c9c9; }

and then add

.advert-list-menu li.selected + li:not(.selected) a{border-left:none;}

to override/disable it for the one following the .selected

Demo at http://jsfiddle.net/tzgyhdmk/2/