counter-increment

The counter-increment property controls automatic numbering. You use it in conjunction with the content property. You use the content property to set the counter name, for example, chapter, subchapter, and this property to tell the browser when to increment the number:

h2:before {content: "Chapter " counter(chapter) "."
           counter(subchapter);
           counter-increment: subchapter;}

The counter(subchapter) just sets up a variable name of subchapter for a <h2> tag. Every time the browser sees an <h2> tag, the value of subchapter is incremented by one (or whatever value you declare in the counter-increment property).

This would result in headings that look something like this:

<h2>Getting Started</h2>

1.2 Getting Started

Here is another example with chapter and section numbering:

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

h2:before {content : "Chapter " counter(chapter) ", section " 
           counter(section) ".";
           counter-increment : section}

Each time the browser sees an <h1> tag, it puts the the string Chapter with the value of the chapter counter in the page. It also increments the counter.

The <h2> tags will put the chapter and section counters into the page and increment the section counter. The end result is that chapters and sections will be automatically numbered in your page.

You can add an integer if you want to increase by more than one and a style if you want to use anything other than a 1, 2, 3 counting system.

Note that increments can be negative, so you can decrement counters as well. Thus:

p { counter-increment : para-count }

bumps the para-count counter each time a <p> element is encountered in your document. Getting fancier the following style subtracts five from the pictures counter for each picture in your document

img { counter-increment : images -5}

What if you want to nest multiple ordered lists but still generate numbering sequences of the form "1.2.3.4..."? Fear not, it can be done!

You use the counters property to put all the values of a named counter into the page at once, separated by the string of your choice. To see how this works, here is an example:

ol        { counter-reset: section }
li        { display : block }
li:before { content: counters(section, ".") ". "; 
            counter-increment: section}

Now, each <li> tag will include all of the section counters, separated by full stops. At the first level, the first <li> tag would be numbered "1.". At the next level, the first tag becomes "1.1." The third level is numbered "1.1.1." and so forth.