Livrar-se de li última contador de itens
-
05-07-2019 - |
Pergunta
Eu tenho um problema chato .. Eu quero que meus primeiros 4 itens em uma lista a ser contados, mas eu quero deixar quinto item fora de numeração .. aqui é o meu CSS:
#alternate_navigation ol
{
display:block;
padding:0;
margin:0;
counter-reset: item;
}
#alternate_navigation li
{
display:block;
padding:0px 0px 0px 10px;
margin:0;
background: url('images/list_bg.jpg') no-repeat;
height:19px;
width:99%;
border-bottom:1px solid #B9B5B2;
}
#alternate_navigation li:before
{
content: counter(item) ". ";
counter-increment: item ;
}
RESULTADO:
- Reservas Online
- Coupon encomenda
- Imprimir Letters
- Enviar e-mails
- Exibir pedidos
Como eu poderia conseguir para último item não deve ser numerada como esta:
- Reservas Online
- Coupon encomenda
- Imprimir Letters
- Os e-mails Enviar
Exibir pedidos
e sim HTML
<div id="alternate_navigation">
<ol>
<li><a href="#">Online Booking</a></li>
<li><a href="#">Coupon Ordering</a></li>
<li><a href="#">Print Letters</a></li>
<li><a href="#">Send Emails</a></li>
<li><a href="#">View orders</a></li>
</ol>
<div>
Obrigado por qualquer resposta ??p>
Solução
Depois de seu CSS atual, adicione:
#alternate_navigation li:last-child:before {
content: "";
counter-increment: none;
}
Isso deve 'redefinir' o estilo para o último elemento.
EDIT: eu deveria apenas mencionar que este não irá funcionar no IE8 devido ao uso de : last-child . Se você precisar de IE6 / 7/8 compatibilidade, eu usaria algo como JQuery em vez de manualmente inserir HTML marcação.
Outras dicas
É possível que o navegador que você está usando não suporta content
, counter-reset
, :before
, ou counter-increment
?
Eu tenho certeza que o IE não, e eu não estou certo sobre os outros. Se for esse o caso, você está apenas recebendo a lista numerada padrão:. Em suma, o navegador ignorar a mais recente CSS
Você pode aplly uma classe css para redefinir esse contador, como neste exemplo:
#alternate_navigation li.last:before
{
content: "";
counter-increment: none ;
}
Verifique o meu exemplo:
Por curiosidade, neste caso, por que você está usando o counter-reset em tudo? Por que não criar
list-style: decimal;
e, em seguida, para o seu html adicionar uma classe para a sua última tag <li>
como <li class="last">
?
Em seguida, você pode definir
li.last { list-style: none; }