CSS counter-increment attribute

Definition and Usage

The counter-increment property sets the increment of a counter for each occurrence of a selector. The default increment is 1.

Description

Using this property, the counter can increment (or decrement) a value, which can be a positive or negative value. If the number value is not provided, the default is 1.

Note:If "display: none" is used, the count cannot be incremented. If "visibility: hidden" is used, the count can be incremented.

See Also:

CSS Reference Manual:CSS :before pseudo-element

CSS Reference Manual:CSS :after pseudo-element

CSS Reference Manual:content Attribute

CSS Reference Manual:counter-reset Attribute

CSS Function:counter() Function

HTML DOM Reference Manual:counterIncrement Attribute

Example

The method to number parts and subparts (such as "Section 1", "1.1", "1.2") is:

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

Try It Yourself

CSS Syntax

counter-increment: none|id|initial|inherit;

Attribute Value

Value Description
none Default. The selector has no counter increment.
id number

id Define the selector, id, or class that will increase the count.

number Define the increment. number can be a positive number, zero, or a negative number.
inherit Specifies that the counter-increment attribute's value should be inherited from the parent element.

Technical Details

Default Value: none
Inheritance: no
Version: CSS2
JavaScript Syntax: object.style.counterIncrement="subsection"

Browser Support

The numbers in the table indicate the first browser version that fully supports this attribute.

Chrome IE / Edge Firefox Safari Opera
4.0 8.0 2.0 3.1 9.6

Note:If !DOCTYPE has been declared, then Internet Explorer 8 (and higher versions) support the counter-increment attribute.