counter-increment property CSS Reference

Definition and Usage

The counter-increment CSS property is used to increase the value of CSS Counters by a given value. The counter's value can be reset using the counter-reset CSS property.

  • Initial none
  • Applies to all elements
  • Inherited no
  • Media all
  • Computed Value as specified
  • Animatable no
  • Canonical order the unique non-ambiguous order defined by the formal grammar


Formal syntax: [<user-ident> <integer>?]+ | none
counter-increment: counter-name        /* Increment counter-name by 1 */
counter-increment: counter-name -1     /* Decrement counter-name by 1 */
counter-increment: counter1 counter2 -4 /* Increment counter1 by 1, and decrement counter2 by 4 */
counter-increment: none                /* Do not increment/decrement anything: used to hide less specific values */
counter-increment: inherit


The name of the counter to increment.
The value to add to the counter. Defaults to 1 if not given.
No counter must be incremented. This is used as the default value, or to cancel an increment in more specific rules.
You may specify as many counters to increment as you want, each separated by a space.


h1 {
  counter-increment: chapter section 2 page;
  /* Increases the value of the chapter and page counters by 1
     and the section counter by 2. */


Desktop browsers

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 2.0 1.0 (?) 8.0 9.2 3.0 (?)

Mobile browsers

Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support NA NA NA NA NA

Relative articles