counter-reset
The counter-reset property contains a list of one or more names of counters, each one optionally followed by an integer (otherwise, the integer defaults to 0.) Each time the given element is invoked, the counters specified by the property are set to the given integer.
Overview table
Syntax
- counter-reset: identifier
- counter-reset: integer
Values
Examples
The following example demonstrates automatic chapter and section numbering using counter-reset, counter-increment, and content. The chapter counter is set to zero for the body element, and then incremented for each h1 element encountered. The section counter is reset for each h1 element and incremented for each h2 element. When the page is viewed, each h1 element is preceded by a chapter heading of the form "Chapter X ." , while each h2 element is preceded by a section number of the form " X.N " .
Notes
Remarks
The counter-reset attribute can contain a list of one or more counters, each one optionally followed by an integer. The integer represents the value that the counter is set to after each occurrence of the element. If an element both resets and increments a counter, the counter is reset first and then incremented. If the same counter is specified more than once, each reset or increment of the counter is processed in the order specified. The counter-increment and counter-reset attributes follow the rules of the CSS cascade. Given two style declarations with the same specificity, only the last one encountered will be processed. For more information about cascade and specificity, see Understanding CSS Selectors. An element that is not displayed (display attribute set to ‘none’) and pseudo-elements that do not generate content (content attribute set to ‘normal’) cannot increment or reset a counter. This property requires Windows Internet Explorer to be in IE8 Standards mode rendering.
counter — reset
С помощью свойства counter — reset создаются новые счётчики на элементе.
Пример
Скопировать ссылку «Пример» Скопировано
Создаём счётчик с именем example и начальным значением 1 на элементе <li> :
Как понять
Скопировать ссылку «Как понять» Скопировано
Перед тем как использовать значение счётчика в функциях counter ( ) и counters ( ) , этот счётчик нужно создать. Именно для этого существует свойство counter — reset .
Каждый элемент имеет коллекцию из нуля или более счётчиков, которые наследуются через дерево документа подобно наследуемым значениям свойств.
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Чтобы создать новый счётчик на элементе, в значении свойства нужно указать имя счётчика и число, с которого начнётся отсчёт.
По умолчанию начальное значение равно 0, если не указано иное.
Здесь создаётся новый счётчик с именем chapter и начальным значением 0:
Чтобы не создавать новый счётчик, можно указать ключевое слово none — это значение по умолчанию.
Аргументы
Скопировать ссылку «Аргументы» Скопировано
Имена счётчиков чувствительны к регистру. Например, значения example и EXAMPLE — это два разных, не связанных между собой счётчика.
Нельзя использовать ключевые слова: none , initial , inherit , unset , default в качестве названий счётчиков.
В значении свойства можно указать 1 или более счётчиков. Указываются они по порядку через пробел.
Читайте также
content
Свойство, с помощью которого можно добавить на страницу то, чего нет в HTML-разметке.
counter-reset
The counter-reset CSS property resets a CSS counter to a given value. This property will create a new counter or reversed counter with the given name on the specified element.
Normal counters have a default initial value of 0. Reversed counters are intended to count down, and have a default initial value set to the number of elements at the current level. The default initial values make it easy to implement the two most common numbering patterns: counting up from one to the number of elements, and counting down from the number of elements to one.
A counter’s value is increased or decreased using the counter-increment CSS property, and the value of an existing counter may be set using counter-set .
Try it
In addition to author-created counters, the property can also reset the list-item counters used by ordered lists (as created using <ol> elements). These have the same behavior as author-created counters, except they are automatically incremented/decremented by one with each list element. This behavior can be overridden using counter-increment .
Syntax
The counter-reset property is specified as either one of the following:
- A <custom-ident> or a reversed(<custom-ident>) naming the counter, followed optionally by an <integer> . Note that the reversed() method is used to create a «reversed» counter. You may specify as many counters and reversed counters to reset as you want, with each counter or counter-number pair separated by a space.
- The keyword value none .
The «implicit» counter named list-item can be used to control the numbering for ordered lists, as created using <ol>
Values
The name of the counter to reset.
The value to reset the counter to on each occurrence of the element. Defaults to 0 if not specified.
No counter reset is to be performed. This can be used to override a counter-reset defined in a less specific rule.
Formal definition
| Initial value | none |
|---|---|
| Applies to | all elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | by computed value type |
Formal syntax
Examples
The following examples show how to reset the counters, but not how they are incremented, decremented, and displayed.
CSS counter-reset Property
Create a counter ("my-sec-counter") and increase it by one for each occurrence of the <h2> selector:
body <
/* Set "my-sec-counter" to 0 */
counter-reset: my-sec-counter;
>
h2::before <
/* Increment "my-sec-counter" by 1 */
counter-increment: my-sec-counter;
content: "Section " counter(my-sec-counter) ". ";
>
More «Try it Yourself» examples below.
Definition and Usage
The counter-reset property creates or resets one or more CSS counters.
The counter-reset property is usually used together with the counter-increment property and the content property.
| Default value: | none |
|---|---|
| Inherited: | no |
| Animatable: | no. Read about animatable |
| Version: | CSS2 |
| JavaScript syntax: | object.style.counterReset="section" Try it |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| Property | |||||
|---|---|---|---|---|---|
| counter-reset | 4.0 | 8.0 | 2.0 | 3.1 | 9.6 |
CSS Syntax
Property Values
| Value | Description |
|---|---|
| none | Default value. No counters will be reset |
| id number | The id defines which counter to reset. The number sets the value the counter is reset to on each occurrence of the selector. The default number value is 0 |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
More Examples
Example
Create a counter ("my-sec-counter") and decrease it by one for each occurrence of the <h2> selector:
body <
/* Set "my-sec-counter" to 0 */
counter-reset: my-sec-counter;
>
h2::before <
/* Decrement "my-sec-counter" by 1 */
counter-increment: my-sec-counter -1;
content: "Section " counter(my-sec-counter) ". ";
>
Example
Numbering sections and sub-sections with "Section 1:», «1.1», «1.2», etc.:
body <
/* Set "section" to 0 */
counter-reset: section;
>
h1 <
/* Set "subsection" to 0 */
counter-reset: subsection;
>
h1::before <
/* Increment "section" by 1 */
counter-increment: section;
content: "Section " counter(section) ": ";
>
h2::before <
/* Increment "subsection" by 1 */
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
>
Example
Create a counter and increase it by one (using Roman numerals) for each occurrence of the <h2> selector:
body <
/* Set "my-sec-counter" to 0 */
counter-reset: my-sec-counter;
>
h2::before <
/* Increment "my-sec-counter" by 1 */
counter-increment: my-sec-counter;
content: counter(my-sec-counter, upper-roman) ". ";
>