CSS selector trick: select all elements except the first

Lots of time you need to create separators like when using breadcrumbs or between articles. This is a small trick I mostly use on list-items that will select all the elements except from the first.

Let's say, I have this HTML of breadcrumbs and I want to add separators between each li element.

<ul class="breadcrumbs">
        <li><a href="main.html">main</a></li>
        <li><a href="sport.html">sport</a></li>
        <li><a href="soccer.html">soccer</a></li>
</ul>

First i will reset the natural styles of list-items and then I will add the li elements 'float: left' to view them in a single row.

/*reset list style*/
ul,li{                  
list-style:none;
margin:0;
padding:0;
}
/*float list items left in one row */
li{
     float:left;
     padding:0 10px;
}

The trick is very easy, in CSS we have the sibling selector ("+"), if i will make selector that choose "li + li" it will select all list-items except the first .

/*select from the second item and up*/
.breadcrumbs li + li{border-left:solid 1px #ddd;}

That's all! I am using it all the time, for unwanted last/first separator.

LIVE EXAMPLE:
Link

• Note: Works in all Browsers (Internet Explorer 7 And Above).

Enjoy!