Truque do seletor de CSS: selecione todos os elementos, exceto o primeiro

Muito tempo você precisa para criar separadores, como ao usar breadcrumbs ou entre artigos. Este é um pequeno truque que uso principalmente em itens de lista que selecionará todos os elementos, exceto o primeiro.

Digamos que eu tenha esse HTML de breadcrumbs e quero adicionar separadores entre cada elemento li.

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

Primeiro, irei redefinir os estilos naturais dos itens da lista e, em seguida, adicionarei os elementos li ‘float: left’ para visualizá-los em uma única linha.

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

O truque é muito fácil, em CSS temos o seletor irmão (“+”), se eu fizer o seletor que escolher “li + li” ele selecionará todos os itens da lista exceto o primeiro.

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

Isso é tudo! Estou usando o tempo todo, como separador último / primeiro indesejado.

EXEMPLO AO VIVO:
Link

• Nota: Funciona em todos os navegadores (Internet Explorer 7 e superior).

Aproveitar!