The counter-increment CSS property increases or decreases the value of a CSS counter by a given value.

Note: The counter's value can be reset to an arbitrary number using the counter-reset CSS property.

Syntax

/* Increment "my-counter" by 1 */
counter-increment: my-counter;

/* Decrement "my-counter" by 1 */
counter-increment: my-counter -1;

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

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

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

The counter-increment property is specified as either one of the following:

  • A <custom-ident> naming the counter, followed optionally by an <integer>. You may specify as many counters to increment as you want, with each name or name-number pair separated by a space.
  • The keyword value none.

Values

<custom-ident>
The name of the counter to increment.
<integer>
The value to add to the counter. Defaults to 1 if not specified.
none
No counter must be incremented. This is used as the default value, or to cancel an increment in more specific rules.

Formal syntax

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

Examples

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

Specifications

Specification Status Comment
CSS Lists 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.

Initial valuenone
Applies toall elements
Inheritedno
Mediaall
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support 2Edge ? Firefox Full support 1IE Full support 8Opera Full support 9.2Safari Full support 3WebView Android ? Chrome Android ? Edge Mobile Full support YesFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown

See also

Document Tags and Contributors

Last updated by: connorshea,