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 value none
Applies to all elements
Inherited no
Media all
Computed value as specified
Animation type discrete
Canonical order the unique non-ambiguous order defined by the formal grammar


/* Increment 'counter-name' by 1 */
counter-increment: counter-name;

/* Decrement 'counter-name' by 1 */
counter-increment: counter-name -1;

/* Increment 'counter1' by 1, and decrement 'counter2' by 4 */
counter-increment: counter1 counter2 -4;

/* Do not increment/decrement anything: used to hide less specific values */
counter-increment: none;

/* Global values */
counter-increment: inherit;
counter-increment: initial;
counter-increment: unset;


The name of the counter to increment. This identifier is composed by a combination of case-insensitive letters a to z, numbers 0 to 9, underscores (_), and/or dashes (-). The first non-dash character must be a letter (that is, no number at the beginning of it, even if preceded by a dash.) Also, two dashes are forbidden at the beginning of the identifier. It can't be none, unset, initial, or inherit in any combination of cases.
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.

Formal syntax

[ <custom-ident> <integer>? ]+ | none


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


Specification Status Comment
CSS Lists and Counters Module Level 3
The definition of 'counter-increment' in that specification.
Working Draft No change
CSS Level 2 (Revision 1)
The definition of 'counter-increment' in that specification.
Recommendation Initial definition

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 2.0 (Yes) 1.0 8.0 9.2 (Yes)[1]
Feature Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? (Yes) ? ? ? ?

[1] This feature is probably implemented since Safari 3.0.

See also

© 2005–2017 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.