Deshacerse del último contador de artículos

Question

Tengo un problema molesto ... Quiero que mis primeros 4 elementos de una lista estén numerados, pero quiero dejar el quinto elemento fuera de la numeración ... aquí está mi 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. Reserva en línea
2. Pedido de cupones
3. Imprimir cartas
4. Enviar correos electrónicos
5. Ver pedidos

¿Cómo podría lograr que el último elemento no se numere así?

1. Reserva en línea
2. Pedido de cupones
3. Imprimir cartas
4. Enviar correos electrónicos
     Ver pedidos

y sí 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>

Gracias por cualquier respuesta

Answer 1

Después de su CSS actual, agregue:

#alternate_navigation li:last-child:before {
    content: "";
    counter-increment: none;
}

Eso debería 'restablecer' el estilo para el último elemento.

EDITAR: solo debo mencionar que esto no funcionará en IE8 debido al uso de : last-child . Si necesita compatibilidad con IE6 / 7/8, usaría algo como JQuery en lugar de insertar manualmente el marcado HTML.

Answer 2

¿Es posible que el navegador que está utilizando no sea compatible con content, counter-reset, :before o counter-increment?

Estoy bastante seguro de que IE no lo hace, y no estoy seguro de los demás. Si ese es el caso, solo está recibiendo la lista numerada predeterminada: en resumen, el navegador ignorará el CSS más reciente.

Answer 3

Puede aplicar una clase css para restablecer ese contador, como este ejemplo:

#alternate_navigation li.last:before
{ 
  content: ""; 
  counter-increment: none ;
}

Mira mi ejemplo:

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

Answer 4

Por curiosidad, en este caso, ¿por qué estás usando el contador de reinicio? ¿Por qué no establecer

list-style: decimal;

y luego para tu html agrega una clase a tu última etiqueta <li> como <li class="last">?

Entonces puedes configurar

li.last { list-style: none; }