Getting rid of li last item counter
-
05-07-2019 - |
Question
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 :
- Online Booking
- Coupon Ordering
- Print Letters
- Send Emails
- View orders
How could I achieve for last item not to be numbered like this :
- Online Booking
- Coupon Ordering
- Print Letters
- 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
Solution
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.
OTHER TIPS
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.
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 :
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; }