Nested Counters

CSS Using Two Counters

You can create multiple counters for different levels of numbering. The following example creates one counter for the page (named "section") and one counter for each <h1> element (named "subsection"):

Example

body {
  counter-reset: section;
}

h1 {

counter-reset: subsection;
}

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

}

h2::before {

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

The CSS counters() Function

The counters() function returns the current values of the named and nested counters, as a string.

Here we use the counters() function to insert a string between different levels of nested counters:

Example

ol {
  counter-reset: section;

list-style-type: none;
}

li::before {
  counter-increment: section;

content: counters(section,".") " ";
}

CSS Counter Properties