How to increment the CSS counter in Table of Content

user_301225 0
Viewed 28

I'm trying to increment the numbering in the following HTML List:

<ol id="jump">
    <li><a href="#section_1">Section 1</a></li>
    <ul class="numbers">
        <li><a href="#link_1">Link 1</a></li>
        <li><a href="#link_2">Link 2</a></li>
        <li><a href="#link_3">Link 3</a></li>
    </ul>
    <li><a href="#section_2">Section 2</a></li>
    <ul class="numbers">
        <li><a href="#link_4">Link 4</a></li>
        <li><a href="#link_5">Link 5</a></li>
        <li><a href="#link_6">Link 6</a></li>
    </ul>
</ol>

The list-style-type of the ol tag is fixed to "None". (I am just trying to fix an old site with lots of posts on them, and I cannot change them all to use the proper ul tag, because there is javascript implied, and it's better to not touch).

Then, the list-style-type of the next ul tag is fixed as "decimal".

I'm not using any CSS counter, and the numbering is working properly with just css. The issue is that before the link 4, the numbering is reset again to 1 and so on. I mean like this:

Section 1

  1. link 1
  2. link 2
  3. link 3

Section 2

  1. link 4
  2. link 5
  3. link 6

I tried to enter a new CSS class for section 2 so that I can use a CSS counter and counter-increment on it, adding 3 to the counter for the link 4, but it doesn't work. The result is something like: 1. 8link4.

Could you be kind to let me know how I could get this working?

Thanks in advance!

css
1 Answers

Sorry for not answering before. Programmers always look for complicated solutions, when the easiest way is ALWAYS the best way to solve the issues, LOL

I finally change the HTML of 134 posts on my client's website (it took me some days), and then I did what Noam suggested, using the start html attribute.

Thank you so much guys!

user_3012250
Related