Sbarazzarsi del contatore dell'ultimo oggetto

Question

Ho un fastidioso problema .. Voglio che i miei primi 4 elementi in un elenco siano numerati ma voglio lasciare il quinto oggetto fuori dalla numerazione .. ecco il mio 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 ;
}

RISULTATO:

1. Prenotazione online
2. Ordine coupon
3. Stampa lettere
4. Invia e-mail
5. Visualizza ordini

Come posso ottenere che l'ultimo elemento non sia numerato in questo modo:

1. Prenotazione online
2. Ordine coupon
3. Stampa lettere
4. Invia email
     Visualizza ordini

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

Grazie per qualsiasi risposta

Answer 1

Dopo il tuo CSS attuale, aggiungi:

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

Questo dovrebbe "resettare" lo stile dell'ultimo elemento.

EDIT: Vorrei solo ricordare che questo non funzionerà in IE8 a causa dell'uso di : last-child . Se hai bisogno della compatibilità IE6 / 7/8, userei qualcosa come JQuery invece di inserire manualmente il markup HTML.

Answer 2

È possibile che il browser che stai utilizzando non supporti content, counter-reset, :before o counter-increment?

Sono abbastanza sicuro che IE non lo faccia e non sono sicuro degli altri. In tal caso, stai semplicemente ricevendo l'elenco numerato predefinito: in breve, il browser ignorerebbe il CSS più recente.

Answer 3

Puoi applicare una classe css per resettare quel contatore, come in questo esempio:

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

Controlla il mio esempio:

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

Answer 4

Per curiosità, in questo caso perché stai usando il counter-reset? Perché non impostare

list-style: decimal;

e quindi per il tuo html aggiungi una classe all'ultimo <li> tag come <li class="last">?

Quindi puoi impostare

li.last { list-style: none; }