Livrar-se de li última contador de itens

Question

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:

1. Reservas Online
2. Coupon encomenda
3. Imprimir Letters
4. Enviar e-mails
5. Exibir pedidos

Como eu poderia conseguir para último item não deve ser numerada como esta:

1. Reservas Online
2. Coupon encomenda
3. Imprimir Letters
4. 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

Answer 1

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.

Answer 2

É 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

Answer 3

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:

http://www.aeon-dev.org/tests/before_pseudo_ie.html

Answer 4

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