CSS counter-increment Property

CSS counter-increment property increases the value of one or more CSS counters. This property is very useful when creating auto-numbering feature.

Usages

The following table outline the usages and version history of this property.

Default value: none
Applies to: All elements
Inherited: No
Version: CSS2
JavaScript Syntax: object.style.counterIncrement = "subsection"

Syntax

Here is a syntax for the CSS counter-increment property

counter-increment: identifier integer | none | initial | inherit;

Property Values

The following table describes the values of this property.

Value Description
identifier The name of the counter to increment
integer The integer value to add to the counter. Default increment is 1. Negative values are allowed
none Default. No counters will be incremented
initial Sets default value of this property
inherit Inherits this property from its parent element

Examples

The example below shows to sets counter-increment property.

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) " ";
}

Run it...   »

Browser Compatibility

  • Google Chrome 4+
  • Mozilla Firefox 2+
  • Internet Explorer 8+
  • Opera 9.6+
  • Safari 3.1+

Note: Here details of browser compatibility with version number may be this is bug and not supported. But recommended to always use latest Web browser.