Getting rid of li last item counter

Question

Hello all, I have a annoying problem .. I want my first 4 items in a list to be numbered but I wanna leave fifth item out of numbering .. here is my 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 ;
}

RESULT :

1. Online Booking
2. Coupon Ordering
3. Print Letters
4. Send Emails
5. View orders

How could I achieve for last item not to be numbered like this :

1. Online Booking
2. Coupon Ordering
3. Print Letters
4. Send Emails
   View orders

and yes 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>

Thank you for any response

Answer 1

After your current CSS, add:

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

That should 'reset' the style for the last element.

EDIT: I should just mention that this will not work in IE8 due to the use of :last-child. If you need IE6/7/8 compatibility, I would use something like JQuery instead of manually inserting HTML markup.

Answer 2

Hi,

You can aplly a css class to reset that counter, like this example :

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

Check my example :

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

Answer 3

Is it possible that the browser you are using doesn't support content, counter-reset, :before, or counter-increment?

I'm pretty sure IE doesn't, and I'm not certain about others. If that is the case, you're just recieving the default numbered list: in short, the browser would ignore the newer CSS.

Answer 4

Out of curiousity, in this case why are you using the counter-reset at all? Why not set

list-style: decimal;

and then for your html add a class to your last <li> tag like <li class="last">?

Then you can set

li.last { list-style: none; }