CSS свойство counter-reset

Свойство counter-reset сбрасывает один или несколько CSS счетчиков в указанное значение. Свойство обычно используется вместе со свойствами content и counter-increment. Имеет две значения - none и id numbers. "None" - значение по умолчанию. Отрицательные значения недопустимы.

Значение по умолчанию none
Применяется Ко всем элементам.
Наследуется Нет
Анимируемое Нет
Версия CSS2
DOM синтаксис object.style.counterReset = "section" ;

Синтаксис

counter-reset: none | name number | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      h2::before {
      counter-increment: section;
      content: "Book " counter(section) ". ";
      }
    </style>
  </head>
  <body>
    <p>Нажмите на кнопку "Try it", чтобы установить свойство counter-reset:</p>
    <button onclick="myFunction()">Try it</button>
    <h2>Учебник HTML</h2>
    <h2>Учебник JavaScript </h2>
    <h2>Учебник CSS </h2>
    <script>
      function myFunction() {
        document.body.style.counterReset = "section";
      }
    </script>
  </body>
</html>

Значения

Значение Описание
none Счетчик для элемента не установлен.
name number Имя счетчика, в котором будет храниться значение счетчика. Значение по умолчанию - 0.
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

Поддержка браузера

chrome edge firefox safari opera
2.0+ 12.0+ 1.0+ 3.1+ 9.2+

Практикуйте свои знания

Что делает свойство counter-reset в CSS?
Считаете ли это полезным?