CSS automatic nested numbering for headings

CSS counters are variables maintained by CSS whose values may be incremented by CSS rules to track how many times they are used. Here is code example to automatically display numbering before h2 and child h3 tags. For a simple example please visit CSS counters – automatic numbering before h2.

Here is code flow on how css nested numbering can be done on h2 and h3.

1. Use counter h2count and h3count for counting h2 and h3.
2. Reset h3 (counter-reset: h3count;) on every occurrence of h2.
3. Increment h2count (counter-increment: h2count;) on every occurrence of h2 and similarly increment h3count on on every occurrence of h3.
4. Display h2count before (using ::before) be fore h2
5. Display a combination of h2count and h3count before h3.

Example – automatic nested counters for h2 and child h3 tags

<style type="text/css">
body { counter-reset: h2count; }
h2 {
  counter-increment: h2count;
  counter-reset: h3count;
}
h2::before {
  content: counter(h2count) ". ";
}
h3 {counter-increment: h3count;}
h3::before {
  content: counter(h2count) "." counter(h3count) ". ";
}
</style>

<h2>First h2</h2>
  <h3>first h3</h3><h3>second h3</h3>
<h2>Second h2</h2>
  <h3>first h3</h3><h3>second h3</h3><h3>third h3</h3>
<h2>Third h2</h2>