How to increment the CSS counter in Table of Content

101
February 10, 2022, at 10:20 AM

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!

Rent Charter Buses Company
READ ALSO
How to make my navbar fit the max width value while not having enough content?

How to make my navbar fit the max width value while not having enough content?

So I have a navbar that has like 4 links and I need it to be a specific width, and i want it to be responsive so I used max-width: 65em, however this results in it not being 65em unless theres alot of content inside which isn't there cuz of the nature...

109
Change style to individual item React-Hooks

Change style to individual item React-Hooks

I want to create a button that when you click it opens a navbar with different colors that when the user presses one of the colors, the navbar is closed and the button it self take the color the user clicked on

93
Angular - window.screen.height doesn&#39;t work on template

Angular - window.screen.height doesn't work on template

I have a problem when I want to optimize part of my template for mobiles in horizontal mode

93
use css variable to generate class names in scss

use css variable to generate class names in scss

is it possible to generate class names by css variables?

133