counter-reset¶
Свойство counter-reset
устанавливает переменную, в которой будет храниться счётчик отображений определенного элемента, а также начальное значение счётчика.
Такой счётчик может выводиться с помощью свойства content
и псевдоэлементов ::after
и ::before
.
Списки, счетчики, генерируемый контент
Синтаксис¶
/* Set "my-counter" to 0 */
counter-reset: my-counter;
/* Set "my-counter" to -1 */
counter-reset: my-counter -1;
/* Set "counter1" to 1, and "counter2" to 4 */
counter-reset: counter1 1 counter2 4;
/* Cancel any reset that could have been set in less specific rules */
counter-reset: none;
/* Global values */
counter-reset: inherit;
counter-reset: initial;
counter-reset: unset;
Значения¶
none
- Запрещает инициацию счётчика для текущего селектора.
inherit
- Наследует значение родителя.
<переменная>
- Задаёт одну или несколько переменных, в которых будет храниться значение счётчика. Значения разделяются между собой пробелом.
<число>
- Начальное значение каждого идентификатора. По умолчанию равно 0.
Примечания¶
Для элементов, у которых установлено display: none
, значение счётчика не меняется.
Значение по-умолчанию:
counter-reset: none;
Применяется ко всем элементам
Спецификации¶
Поддержка браузерами¶
Описание и примеры¶
<!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>