Get rid of the last item counter

I have an unpleasant problem. I want my first 4 items in the list to be numbered, but I want to leave the fifth item from the 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 order
  • Print letters
  • Send emails
  • View Orders

How could I make sure that the last element is not numbered as follows:

  • Online booking
  • Coupon order
  • Print letters
  • Send letters
    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>

Thanks for any answer

+3
source share
4 answers

After your current CSS, add:

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

This should "reset" the style for the last item.

: , IE8 - : last-child. IE6/7/8, - JQuery , HTML.

+1

css reset , :

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

:

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

+1

, content, counter-reset, :before counter-increment?

, IE , . , : , CSS.

+1

, , counter- reset ?

list-style: decimal;

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

Then you can set

li.last { list-style: none; }
0
source

Source: https://habr.com/ru/post/1717365/


All Articles