Se débarrasser de li dernier objet

Question

J'ai un problème ennuyeux .. Je veux que mes 4 premiers éléments d'une liste soient numérotés, mais je veux laisser le cinquième élément en dehors de la numérotation .. voici mon 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 ;
}

RÉSULTAT:

1. Réservation en ligne
2. Commande de coupons
3. Imprimer des lettres
4. Envoyer des courriels
5. Afficher les commandes

Comment pourrais-je obtenir que le dernier élément ne soit pas numéroté comme suit:

1. Réservation en ligne
2. Commande de coupons
3. Imprimer des lettres
4. Envoyer des courriels
     Afficher les commandes

et oui 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>

Merci pour votre réponse

Answer 1

Après votre CSS actuel, ajoutez:

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

Cela devrait "réinitialiser" le style du dernier élément.

MODIFIER: Je tiens à préciser que cela ne fonctionnera pas dans IE8 en raison de l'utilisation de : last-child . Si vous avez besoin de la compatibilité IE6 / 7/8, je voudrais utiliser quelque chose comme JQuery au lieu d’insérer manuellement un balisage HTML.

Answer 2

Est-il possible que le navigateur que vous utilisez ne supporte pas content, counter-reset, :before ou counter-increment?

Je suis presque sûr que IE ne le fait pas et je ne suis pas sûr des autres. Si tel est le cas, vous ne faites que recevoir la liste numérotée par défaut: en résumé, le navigateur ignorerait le nouveau CSS.

Answer 3

Vous pouvez utiliser une classe CSS pour réinitialiser ce compteur, comme dans l'exemple suivant:

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

Vérifiez mon exemple:

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

Answer 4

Par curiosité, dans ce cas, pourquoi utilisez-vous la réinitialisation du compteur? Pourquoi ne pas définir

list-style: decimal;

puis pour votre code HTML ajouter une classe à votre dernière <li> balise telle que <li class="last">?

Ensuite, vous pouvez définir

li.last { list-style: none; }