Cancel numbering order for ordered lists

Question

I would like to have the numbering of an ordered list in descending order. live example here:

demo

But instead of having a span multiple ol counter, I would like the reset counter after each ol.

So, the desired result for a live demonstration would be:

[3] 1 [2] 2 [1] 3 [2] 4 [1] 5 

Does anyone have an idea how to change the code from a live demo (or find out the best solution that is supported by most browsers) in order to have the above behavior?

Also, is there a way to make [] "copyable" with a copy to paste into Word documents or any open source alternative? Since in the above example, it only interprets numbers without square brackets.

Answer 1

You must set the counter-reset value for each ol to number of child + 1

 var ol_elements = document.getElementsByTagName("ol"); //console.log(ol_elements[0].children.length) for (var i = 0; i < ol_elements.length; i++) { ol_elements[i].setAttribute('style', 'counter-reset: item ' + (ol_elements[i].children.length + 1)); } 

 body { font: 13px Verdana } ol { list-style-type: none; margin-left: 20px; padding: 0px; } ol>li { counter-increment: item -1; } ol>li:before { content: "[" counter(item) "]"; padding-right: 10px; } 

 <div id="content"> <ol> <li>1</li> <li>2</li> <li>3</li> </ol> <ol> <li>4</li> <li>5</li> </ol> <ol> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ol> </div> 

Answer 2

You can use CSS counters to achieve this. Note that I apply: before the pseudo-element to whether that displays the score.

Please note that the reset counter is set to the ol element - this means that the count will be repeated with each ol instance, so you do not need to keep track of the number of lists you have, or the number of litas the list has. You can use it to count nested lists in a sheet, and also display them as 1.1, 1.2, etc.

You can set the counter to start again on each ol .... and you can have different counts and displays for different lists. That way you can definitely structure them the way you want .... https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters

UPDATE - based on a good answer from @Bhuwan Bhatt - I added only the javascript version for setting on the counter via querySelectorAll - used twice - first to get all ols in the document, and then in each ol to get the li number of this ol.

Then just setting the counter to lengthen li (+1 due to zero indexing li)

 var lists = document.querySelectorAll('ol'); var listsLength = lists.length; for(i=0;i<listsLength;i++) { var lis= lists[i].querySelectorAll('li'); var lisLength = lis.length +1; lists[i].style.counterReset= 'section '+ lisLength; } 

 ol { list-style:none; padding-left:0; counter-reset: section ; /* Creates a new instance of the section counter with each ul element - count set to 4 because of zero indexing of the list */ } li::before { counter-increment: section -1; /* Using a negative number to decrement the count */ content: counter(section); /* Display the count as :before element */ margin-right:15px; /* provide a margin between the ount and the li */ } 

 <ol> <li>test 1</li> <li>test 2</li> <li>test 3</li> </ol> <ol> <li>test 1</li> <li>test 2</li> <li>test 3</li> <li>test 3</li> </ol> <ol> <li>test 1</li> <li>test 2</li> </ol> 

Answer 3

Here is another solution that relies on the flex and column-reverse column direction value. This value will allow you to cancel the list and thereby change the number, but it will also change the data, so you can add a little jQuery code to return them to the original order:

 $('ol.reverse').each(function() { $(this).append($(this).children('li').get().reverse()); }) 

 ol.reverse { display: flex; flex-direction: column-reverse; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ol class="reverse"> <li>aa</li> <li>ab</li> <li>ac</li> </ol> <ol class="reverse"> <li>a</li> <li>bb</li> <li>cccc</li> <li>ddddd</li> </ol> <ol> <li>a</li> <li>bb</li> <li>cccc</li> <li>ddddd</li> </ol>