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

Это свойство определяет идентификатор, в котором будет храниться счётчик отображений определенного элемента, а также его начальное значение. Такой счётчик может выводиться с помощью свойства content.

CSS синтаксис

counter-reset: none | идентификатор | целое число | initial | inherit;

Возможные значения

ЗначениеОписание
noneЗначение по умолчанию. Запрещает создание или сброс счетчика.
идентификаторОпределяет одну или несколько переменных, в которых будет храниться значение счетчика. Переменные разделяются пробелом.
целое числоОпределяет начальное значение счетчика. По умолчанию равно 0.
inheritЗначение наследуется от родительского элемента.
initialУстанавливает значение по умолчанию.

Пример использования

Способ пронумировать главы и подглавы в виде "Глава 1", "1.1", "1.2" и т.д.


body {
     counter-reset: section;
}

 h1 {
     counter-reset: subsection;
}

 h1:before {
     counter-increment: section;
     content: "Глава " counter(section) ". ";
}

 h2:before {
     counter-increment: subsection;
     content: counter(section) "." counter(subsection) " ";
}