CSS fallback counter for nested lists formatted as 1.1, 1.2,

Question

I'm struggling to find a way in CSS that I have ...

https://jsfiddle.net/Lh0kLvj7/

    ol.content {
  counter-reset: item 1;
  list-style: none;
}

li.content:before {
  counter-increment: item;
  content: counter(item)". ";
}

ol.content ol.content li.content:before {
  counter-increment: item;
  content: counters(item, ".") " ";
}

<p><span style="font-size: 24px;">On this page:</span></p>

<ol class="content">
  <li class="content"><a href="#">section TWO</a>

    <ol class="content">
      <li class="content"><a href="#section2-1">TWO point *ONE* (not 2.2!)</a></li>
      <li class="content"><a href="#section2-2">TWO point *TWO*</a></li>
      <li class="content"><a href="#section2-3">TWO point *THREE*</a></li>
      <li class="content"><a href="#section2-4">TWO point *FOUR*</a>

        <ol class="content">
          <li class="content">TWO point *FOUR* point *ONE* (not 2.5.2!)</li>
          <li class="content">Title...</li>
          <li class="content">Title...</li>
          <li class="content">Title...</li>
          <li class="content">Title...</li>
        </ol>
      </li>
      <li class="content"><a href="#section2-5">TWO point *FIVE*</a></li>
    </ol>
  </li>
</ol>

... first start the parent sequence of the counter with a number that is not one (that is, section 2 in the script above), but the nested lists actually begin with .1. I'm not very good at CSS, so this might be something simple that I am missing. In the above script, you will see that the HTML is not displayed correctly ...

2.

2. 2

2.3

2,4

2,5

2.5. 2

when i need ...

2.

2. 1

2.3

2,4

2. 4.1

/, , counter- reset: item 1;, counter- reset: item 2;, counter - reset: item 4; .. -, , reset, 1.

Answer 1

1:

ol.content {
  counter-reset: item 1;
  list-style: none;
}

reset 0 , :

ol.content ol.content {
  counter-reset: item 0;
}

https://jsfiddle.net/Lh0kLvj7/3/

Answer 2

counter-reset , .

 ol.content ol.content {
    counter-reset: item;
    list-style: none;
 }

ol.content {
  counter-reset: item 1;
  list-style: none;
}

li.content:before {
  counter-increment: item;
  content: counter(item)". ";
}
ol.content ol.content {
  counter-reset: item;
  list-style: none;
}

ol.content ol.content li.content:before {
  counter-increment: item;
  content: counters(item, ".") " ";
}

<p><span style="font-size: 24px;">On this page:</span></p>

<ol class="content">
  <li class="content"><a href="#">section TWO</a>

    <ol class="content">
      <li class="content"><a href="#section2-1">TWO point *ONE* (not 2.2!)</a></li>
      <li class="content"><a href="#section2-2">TWO point *TWO*</a></li>
      <li class="content"><a href="#section2-3">TWO point *THREE*</a></li>
      <li class="content"><a href="#section2-4">TWO point *FOUR*</a>

        <ol class="content">
          <li class="content">TWO point *FOUR* point *ONE* (not 2.5.2!)</li>
          <li class="content">Title...</li>
          <li class="content">Title...</li>
          <li class="content">Title...</li>
          <li class="content">Title...</li>
        </ol>
      </li>
      <li class="content"><a href="#section2-5">TWO point *FIVE*</a></li>
    </ol>
  </li>
</ol>

Hide result

Answer 3

, ".content" ... OL

ol {
  list-style: none;
}

.f-o{
 counter-reset: f-o 1; 
/*initialized at 1 for demonstration purposes, you might want to start from zero*/
}

.s-o{
 counter-reset: s-o; 
}

.t-o{
  counter-reset:t-o;
}

.f-o li:before {
  content: counter(f-o)". ";
  counter-increment: f-o;

}

.s-o li:before {
  content: counter(f-o) "." counter(s-o)". ";
  counter-increment: s-o;
}

.t-o li:before {
  content: counter(f-o) "." counter(s-o)". " counter(t-o)". ";
  counter-increment: t-o;
}

<ol class="f-o">
  <li><a href="#">section TWO</a>

    <ol class="s-o">
      <li><a href="#section2-1">TWO point *ONE* (not 2.2!)</a></li>
      <li><a href="#section2-2">TWO point *TWO*</a></li>
      <li><a href="#section2-3">TWO point *THREE*</a></li>
      <li><a href="#section2-4">TWO point *FOUR*</a>

        <ol class="t-o">
          <li>TWO point *FOUR* point *ONE* (not 2.5.2!)</li>
          <li>Title...</li>
          <li>Title...</li>
          <li>Title...</li>
          <li>Title...</li>
        </ol>
      </li>
      <li><a href="#section2-5">TWO point *FIVE*</a></li>
      </ol>
  </li>
</ol>

Hide result

Answer 4

The solution is to use the counter-reset property.

 ol.content ol.content {
   counter-reset: item 0;
 }

The counter-reset property is specified as one of the following:

A user identifier denoting a counter, then optionally an integer. You can specify as many counters as reset as you want, with each name or number of a pair of names separated by a space.

The value of the keyword is none.

Visit https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters