CSS counters with specific numbering

Question

How can i create a single or multiple CSS counters to imitate the numbering in the screenshot below? Still learning on counters and this numbering format is killing me. Thanks in advance!

Ordered List with custom numbering

Answer 1

You may do this easily with two or more counters.

Steps:

1. Reset first level counter in body using attribute counter-reset
2. Reset the second level counter in the style declaration of the first level element (h1)
3. Reset the third level counter in the style declaration of the second level element (h2) and so on
4. Use ::before selector in each level to increment the corresponding counter and put the content as desired by using counter() function

body {
  counter-reset: section;
}

h1 {
  counter-reset: subsection;
}

h1::before {
  counter-increment: section;
  content: counter(section) ". ";
}

h2::before {
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}

<h1>Context</h1>
<h2>HTML</h2>
<h2>Javascript</h2>

<h1>Details</h1>
<h2>HTML</h2>
<h2>Javascript</h2>

<h1>Conclusion</h1>