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	Значение элемента наследуется от родительского элемента.