CSS PROPERTIES
Expand All|Collapse All
CSS AT-RULES
SPONSORED LINKS

CSS counter-increment Property

Topic: CSS3 Properties Reference« Prev|Next »

Description

The counter-increment CSS property increments one or more counter values. This property is very useful for creating auto-numbering feature.

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

Default value: none
Applies to: All elements
Inherited: No
Animatable: No. See animatable properties.
Version: CSS 2, 3

Syntax

The syntax of the property is given with:

counter-increment: 
[ identifier integer ]1 or more pairs | none | initial | inherit

The example below shows the counter-increment property in action.

  • body {
  •     counter-reset: section;
  • }
  • h1 {
  •     counter-reset: category;
  • }
  • h1:before {
  •     counter-increment: section;
  •     content: "Section " counter(section) ". ";
  • }
  • h2:before {
  •     counter-increment: category;
  •     content: counter(section) "." counter(category) " ";
  • }

Property Values

The following table describes the values of this property.

Value Description
identifier The name of the counter to increment.
integer The value to add to the counter. The default increment is 1. Zero or negative values are allowed.
none No counters will be incremented. This is default value.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element direction property.

Browser Compatibility

The counter-increment property is supported in all major modern browsers.

Browsers Icon

Basic Support—

  • Firefox 1.5+
  • Google Chrome 2+
  • Internet Explorer 8+
  • Apple Safari 3+
  • Opera 9.2+
 

Warning:Internet Explorer 7 and earlier versions don't support the counter-increment property. IE8 supports only if a valid <!DOCTYPE> is specified.


Further Reading

See tutorial on: CSS Pseudo Elements.

Related properties: content, counter-reset.

 
Close

Your Feedback:

 

We would love to hear from you! Please say something.