How to prefix hierarchical ordered list item numbers with a static string

Question

I can set a constant string for for each section, and need to preserve original hierarchical structure of nested OL tags. I need something as:

1. First section

  1.1. Some text here, and some fruits:
        1.1.1. Apples
        1.1.2. Oranges
  1.2. Some more text here...

2. Second section

  2.1. Some second text here, and some fruits:
        2.1.1. Bannanas
        2.1.2. Mangos
  2.2. Some more second text here...

Where section-numbering I can do hard coding it, but all other need by automatic CSS... I try this but it is not working as expected: style (CSS) block them HTML block,

li:not(:last-child) {
 padding-bottom: 9pt;
}
ol ol > li:first-child {
 padding-top: 9pt;
}

/* hierarchical ordering:  */
ol {
 padding-left: 12pt; 
 counter-reset: item
}
li {
  display: block
}
li:before {
  content: counters(item, ".") ". ";
  counter-increment: item
}
section > ol li::before {
 position: relative;
 left:-4pt;
}
/* hard coding section numbers to avoid risks on bad browsers */
#sec1 > ol > li::before  { content: "1." counter(item) "."; }
#sec2 > ol > li::before  { content: "2." counter(item) "."; }
#sec3 > ol > li::before  { content: "3." counter(item) "."; }

<section id="sec1">
  <h1>1. First section</h1>
  <ol>
    <li>Some text here, and some fruits:
      <ol>
        <li>Apples</li>
        <li>Oranges</li>
      </ol>
    </li>
    <li>Some more text here..</li>
  </ol>
</section>

<section id="sec2">
  <h1>2. Second section</h1>
  <ol>
    <li>Some second text here, and some frits:
      <ol>
        <li>Bannanas</li>
        <li>Mangos</li>
      </ol>
    </li>
    <li>Some more second text here..</li>
  </ol>
</section>

Notes

• similar to "How to prefix a word in a list number", "Insert CSS parent section counter for nested lists" and "How can I prefix ordered list item numbers with a static string using CSS?" but not duplicated.

• need clean HTML5 + CSS, no Javascript.

• Need to use modern Firefox and Chrome browsers only (no Microsoft).

Answer 1

I removed unnecessary codes and changed h1s to h2s.

Your counter counts only li elements. You need to count h2s with the same counter too.

Read about how CSS counter-resets create new scopes.

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

<section>
  <h2>First section</h1>
    <ol>
      <li>Some text here, and some fruits:
        <ol>
          <li>Apples</li>
          <li>Oranges</li>
        </ol>
      </li>
      <li>Some more text here.</li>
    </ol>
</section>

<section>
  <h2>Second section</h1>
    <ol>
      <li>Some second text here, and some fruits:
        <ol>
          <li>Bannanas</li>
          <li>Mangos</li>
        </ol>
      </li>
      <li>Some more second text here.</li>
    </ol>
</section>