counter-reset

counter-reset

The counter-reset CSS property is used to reset CSS Counters to a given value.

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

Syntax

/* Set counter-name to 0 */
counter-reset: counter-name;

/* Set counter-name to -1 */
counter-reset: counter-name -1;

/* Set counter1 to 1, and counter2 to 4 */
counter-reset: counter1 1 counter2 4;

/* Cancel any reset that could have been set in less specific rules */
counter-reset: none;

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

Values

<custom-ident>
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.
<integer>
The value to reset the counter to on each occurrence of the element. Defaults to 0 if not given.
none
Is a keyword indicating that no counter reset is to be performed. It can be used to hide counter-reset defined in less specific rules.

You may specify as many counters to reset as you want, each separated by a space.

Formal syntax

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

Examples

h1 {
  counter-reset: chapter section 1 page;
  /* Sets the chapter and page counters to 0
     and the section counter to 1. */
}

Specifications

Specification Status Comment
CSS Lists and Counters Module Level 3
The definition of 'counter-reset' in that specification.
Working Draft No change.
CSS Level 2 (Revision 1)
The definition of 'counter-reset' 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[1] 8.0 9.2 3.1[1]
Feature Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 2.1 (Yes) 25.0[1] 10[1] 10.0 3.2

[1] The compatibility info may not be correct.

See also

© 2005–2017 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/counter-reset

在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号

意见反馈
返回顶部