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

Свойство counter-reset сбрасывает один или несколько CSS-счётчиков на заданное значение. Обычно это свойство используется вместе со свойствами content и counter-increment. Свойство принимает имя счётчика и необязательное целое число, либо ключевое слово none. Значение none используется по умолчанию. Отрицательные значения допускаются.

Начальное значение	none
Применяется ко	Всем элементам.
Наследуется	Нет.
Анимация	Нет.
Версия	CSS2
Синтаксис DOM	object.style.counterReset = "section" ;

Синтаксис

Синтаксис свойства CSS counter-reset

css

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

Пример использования свойства counter-reset:

Пример использования свойства CSS counter-reset со значением section

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h2::before {
        counter-increment: section;
        content: "Book " counter(section) ". ";
      }
    </style>
  </head>
  <body>
    <p>Click the "Try it" button to set the counter-reset property:</p>
    <button onclick="myFunction()">Try it</button>
    <h2>HTML Tutorials</h2>
    <h2>JavaScript Tutorials</h2>
    <h2>CSS Tutorials</h2>
    <script>
      function myFunction() {
        document.body.style.counterReset = "section 5";
      }
    </script>
  </body>
</html>

Try it Yourself »

Пример использования свойства counter-reset со значением со знаком минус:

Пример использования свойства counter-reset со значением со знаком минус:

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        /* "my-counter" to 0 */
        counter-reset: my-counter;
      }
      h2::before {
        /* "my-counter" by 1 */
        counter-increment: my-counter -1;
        content: "Section " counter(my-counter) ". ";
      }
    </style>
  </head>
  <body>
    <h2>HTML Tutorial</h2>
    <h2>CSS Tutorial</h2>
    <h2>JavaScript Tutorial</h2>
    <h2>PHP Tutorial</h2>
  </body>
</html>

Try it Yourself »

Пример использования свойства counter-reset для нумерованных разделов и подразделов:

Пример использования свойства counter-reset для нумерованных разделов и подразделов:

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        /* Set "section" to 0 */
        counter-reset: section;
      }
      h2 {
        /* Set "subsection" to 0 */
        counter-reset: subsection;
      }
      h2::before {
        counter-increment: section;
        content: "Book " counter(section) ": ";
      }
      h3::before {
        counter-increment: subsection;
        content: counter(section) "." counter(subsection) " ";
      }
    </style>
  </head>
  <body>
    <h2>HTML</h2>
    <h3>HTML Basics</h3>
    <h3>HTML Templates</h3>
    <h3>HTML References</h3>
    <h3>HTML Tags</h3>
    <h2>CSS</h2>
    <h3>CSS Basics</h3>
    <h3>CSS References</h3>
    <h3>CSS Advanced</h3>
    <h3>CSS Guides</h3>
    <h3>CSS Selectors</h3>
    <h3>CSS Properties</h3>
  </body>
</html>

Try it Yourself »

Значения

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

Практика

Для чего используется свойство CSS 'counter-reset'?

Оно используется для предотвращения повторного появления элемента.Оно создаёт или сбрасывает CSS-счётчики в списке или любом другом элементе.Оно задаёт цвет фона элемента.Оно добавляет изображение или градиент к HTML-элементу.Оно позиционирует элементы как 'fixed', 'relative' или 'absolute'.Оно часто используется вместе со свойством 'counter-increment' и свойством 'content'.

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

Синтаксис ​

Пример использования свойства counter-reset: ​

Пример использования свойства counter-reset со значением со знаком минус: ​

Пример использования свойства counter-reset для нумерованных разделов и подразделов: ​

Значения ​

Практика ​

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

Синтаксис

Пример использования свойства counter-reset:

Пример использования свойства counter-reset со значением со знаком минус:

Пример использования свойства counter-reset для нумерованных разделов и подразделов:

Значения

Практика