counter-reset

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

Такой счётчик может выводиться с помощью свойства content и псевдоэлементов :after и :before.

Синтаксис

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

Значения

none
Запрещает инициацию счётчика для текущего селектора.
inherit
Наследует значение родителя.
идентификатор

Задаёт одну или несколько переменных, в которых будет храниться значение счётчика. Значения разделяются между собой пробелом.
целое число
Начальное значение каждого идентификатора. По умолчанию равно 0.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>counter-reset</title>
  <style>
   li { list-style-type: none; } /* Убираем исходную нумерацию у списка */
   ol { counter-reset: list1; } /* Инициируем счетчик */
   ol li:before {
    counter-increment: list1; /* Увеличиваем значение счетчика */
    content: counter(list1) ". "; /* Выводим число */
   }
   ol ol { counter-reset: list2; } /* Инициируем счетчик вложенного списка */
   ol ol li:before {
    counter-increment: list2; /* Увеличиваем значение счетчика вложенного списка */
    content: counter(list1) "." counter(list2) ". "; /* Выводим число */
   }
  </style>
 </head>
 <body>
  <ol>
   <li>Пункт
    <ol>
     <li>Подпункт</li>
     <li>Подпункт</li>
     <li>Подпункт</li>
    </ol>
   </li>
   <li>Пункт
    <ol>
     <li>Подпункт</li>
     <li>Подпункт</li>
    </ol>
   </li>
  </ol>
 </body>
</html>

Результат данного примера показан на рис. 1.

Применение свойства counter-reset

Рис. 1. Применение свойства counter-reset

Примечание

Для элементов, у которых установлено display: none, значение счётчика не меняется.

Браузеры

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
8.0+2.0+9.2+3.0+1.0+2.1+2.0+

Краткая информация

Значение по умолчаниюnone
НаследуетсяНет
ПрименяетсяКо всем элементам
Ссылка на спецификацию http://www.w3.org/TR/CSS21/generate.html#propdef-counter-reset

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3