Home

Numbering Sections (CSS Counters)

CSS Counters are used to maintain an 'automatic numbering' system
and could be good for sections and sub-sections / Chapter & Verse.

To implement the CSS Counter system you need to use the following properties:-

The functions counter() or counters() adds the value of a counter to an element.


counter-reset
To use a CSS counter, it must first be created with counter-reset.
It is used to reset the Section or the Subsection values back to zero.
If you only need one counter on a web page then in the <body> section you can put your...
counter-reset: section;

counter-increment
Use counter-increment to increase the SECTION number or the SUBSECTION number.
It seems a good idea to use this with the ::BEFORE method.

content
The content command is used to display the Section and/or Subsection values

Top

So, for example:-

In the <head> section you can have
<style>
   body {
      counter-reset: section;
   }
   .incrSection {
      counter-reset: subsection;
   }
   .incrSection::before {
      content: "Section " counter(section) ". ";
   }
   .incrSub::before {
      counter-increment: subsection;
      content: counter(section) ". " counter(subsection) " ";
   }
</style>

This basically means...


So, for example:-

This is a Section

Sub-section, the first line.
With some more text.

Sub-section, the second line.
With some more text.

Sub-section, the third line.
With some more text.




And here I shall use it with an unordered list...

Top

So, for example:-

If I want to reset the Section Number back to ONE I can add a counter-reset:section; before the element.
Here I decided to create my own <resetSection> tag which does just that - see code

This is a Section

Sub-section, the first line.
With some more text.

Sub-section, the second line.
With some more text.

Sub-section, the third line.
With some more text.

Another example is of nested ordered lists...
It seems to have it's own way of creating the numbers as all I am using is just one counter (called mySection) and it knows to display 2 or 2.3 or 2.3.1 etc.
(I created a NEW counter - called mySection for this)

  1. First Item
  2. Second item
    1. First nested item
    2. Second nested item
    3. Third Nested item
      1. And another Nested item
      2. And another Nested item
      3. And another Nested item
    4. Fourth nested item
  3. Third item
  4. Fourth item
  1. First line of a brand new ordered list
  2. Second line of a brand new ordered list
Top