In the CSS 2.1 there is a possibility of implementing an automatic counters and numbering simply by using two properties, counter-increment and counter-reset.

Counters incrementing and resetting properties

The counter-increment and counter-reset properties both contain following information:

  1. value: [<indentifier> <integer>?], none or inherit;
  2. initial: none;
  3. applies to: all elements;
  4. inherited: no;
  5. percentages: N/A;
  6. media: all;
  7. computed value: as specified.

Both properties as value accept one or more counter names (identifiers) with an optional integer. For the counter-increment property the integer may be used as indicator by how much the counter is incremented for every occurrence of that element. Negative values and zero are allowed and default value is '1'. For the counter-reset the integer is used as the value that the counter is set to on each occurrence of that element. The default value is '0'.

Both properties are strictly related to the content property (see example below).

If an element increments or resets a counter and also uses it, the counter will be used after being incremented or reset. If an element resets and increments a counter, the counter will be first reset and then incremented.

The stylings of counters have same rules as styling the lists, in sense of the marker or bullet type choice.

Please note that Internet Explorer 8.0 requires DOCTYPE to be declared in order to respect the counter related CSS code.

Example

Example with CSS counters properties:

 

›› go to examples ››