html - Reverse the numbering order across multiple OL (not list order) -

i'd use css obtain ordered list continued numbering , in reverse. see attached figure.

naturally, i'd resulting list in reverse order, i.e., [5], [4], etc.

do have redesign css part or simple change? can't figure out how obtain reverse numbering.

p.s.: apologize not putting code in question. stack overflow kept saying there wrong it, though formed correctly in preview. lost patience after few minutes trying "fix" it.

using css counters

currently there no way automate reverse numbering across multiple ol elements (without reversing order of display of list items) css counters when no. of elements dynamic. if reversing order of display of list on whole fine, have @ this answer.

you can make use of bit of javascript along counters achieve this. approach follows:

• using js, count (licount) of applicable li elements when page loaded.
• set licount second parameter counter-reset property on parent container contain applicable ol elements. second parameter counter-reset property represents initial/start value of counter.
• in css, set -1 second parameter counter-increment property. second parameter number counter incremented every time. here, since value set -1 counter decremented.
• as normal, display value of counter using :before pseudo element.

window.onload = function() {    var licount = document.queryselectorall('ol > li').length;    document.body.setattribute('style', 'counter-reset: li ' + (licount + 1));  }

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

<div id="content">    <h3>year</h3>    <ul>      <li><a href="#2010-2015">2010-2015</a></li>      <li><a href="#2007-2008">2007-2008</a></li>    </ul>  </div>  <h3 id="2010-2015">2010-2015</h3>  <ol>    <li>a</li>    <li>b</li>    <li>c</li>  </ol>  <h3 id="2007-2008">2007-2008</h3>  <ol>    <li>d</li>    <li>e</li>  </ol>

---

why not reversed attribute?

• browser support css counter better reversed html5 attribute. reversed attribute not @ supported ie , opera.
• js still required irrespective of approach used (to assign counter-reset value counters, start value ol reversed) js setting counter-reset simpler other when numbering across multiple ordered lists.

below sample snippet using reversed attribute. i take no credit approach taken linked thread , other answer here. have used added js illustrate meant in point 2 above.

window.onload = function() {    var licount = document.queryselectorall('ol > li').length;    var olels = document.queryselectorall('ol[reversed]');      var prevlicount = 0;    (var = 0; < olels.length; i++) {      /* below lines required because start first ol 5 whereas next 2 */      olels[i].setattribute('start', licount - prevlicount);      prevlicount = olels[i].queryselectorall('li').length;    }  }

<div id="content">    <h3>year</h3>    <ul>      <li><a href="#2010-2015">2010-2015</a>      </li>      <li><a href="#2007-2008">2007-2008</a>      </li>    </ul>  </div>  <h3 id="2010-2015">2010-2015</h3>  <ol reversed="reversed">    <li>a</li>    <li>b</li>    <li>c</li>  </ol>  <h3 id="2007-2008">2007-2008</h3>  <ol reversed="reversed">    <li>d</li>    <li>e</li>  </ol>