[Resolvido] Remover a borda (Right) do ultimo LI

[fernandotholl 19]

Bom dia Pessoal, fiz um menu hoje pela manhã e como fiz o CSS não consigo remover a borda da ultima <LI>, vejam o exemplo:

 

 

Eu preciso remover apenas a ultima borda, segue abaixo meu código HTML e CSS

 

HTML

<ul id="user-menu">
   <li><a href="interna.html" title="Perfil" class="perfil">Perfil</a></li>
   <li><a href="interna.html" title="Mensagens" class="mensagens">Mensagens</a></li>
   <li><a href="interna.html" title="Tarefas" class="tarefas">Tarefas</a></li>
   <li><a href="interna.html" title="Configurações" class="configs">Configurações</a></li>
   <li><a href="interna.html" title="Sair" class="logout">Sair</a></li>
</ul>   

 

CSS

<style>
#user-top #user-menu{
   float:right;
   margin: 6px 0 0 0;
   padding: 0 0 0 0;
   list-style: none;
}

#user-top #user-menu li{
   display: inline;
   padding: 0 10px 0 10px;
   margin: 0 0 0 0;
   background: url('../imagens/user-top-separator.png') no-repeat;
   background-position: right;
   float:left;
}

#user-menu li a{
   text-decoration: none;
   color: #fff;
}
</style>

 

Se alguem conseguir me ajudar, seria de muita valia.

 

Até + pessoal

 

Na verdade pessoal, se observarem bem, eu não utilizo uma borda, e sim um background com o separador, justamento pelo fato de precisar colocar a barra menor que a própria <li>

 

No caso eu preciso encontrar uma forma de remover o background da ultima <li>, eu não posso fazer pela class "logout" pois dentro dela eu tenho o background com a imagem do logout, como na imagem que postei.

 

Se alguem conseguir me ajudar fico muito grato.

[William Bruno 1501]

#user-top #user-menu li:last-child { background: none; }

 

porém convém lembrar, que esse pseudo-seletor, não funciona no ie6 e afins..

[fernandotholl 19]

Bom dia William!

 

Perfeito cara, funcionou corretamente, graças a Deus a aplicação aqui não precisa ser renderizada no <IE6.

 

Eu sabia da existência desse seletor no jQuery e nem me toquei(lembrei) que o Framework utiliza os seletores CSS para isso.

 

Obrigado mais uma vez pela ajuda!

[Bruno Augusto 417]

Olha só, já que cada LI tem sua própria class, você também poderia fazer:

 

.logout {
   background: none;
}

Claro, você estaria tornando seu CSS dependente dessa classe, mas SE por um acaso algum pseudo-navegador encrespar, é outra possível saída.

[William Bruno 1501]

Olha só, já que cada LI tem sua própria class, você também poderia fazer:

a class atualmente está no <a> e não no <li>

 

Eu recomenderia colocar a class no LI, e não no A, mas não sei se ele pode alterar o html.

[Bruno Augusto 417]

Opa, falha minha.

 

Mas se houver tal possibilidade, a solução ainda é válida.

[fernandotholl 19]

Caros, realmente, foi dessa forma que meu código ficou mais organizado e fácil de entender, coloquei a class na <li> e o ícone no <a>.

 

Obrigado a todos.