Свойство counter-reset

Описание

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

Синтаксис

counter-reset: [переменная | число?] + none;
Значение Описание
none Запрещает инициацию счётчика для текущего селектора.
inherit Наследует значение родителя.
переменная Задаёт одну или несколько переменных, в которых будет храниться значение счётчика. Значения разделяются между собой пробелом.
число Начальное значение каждого идентификатора. По умолчанию равно 0.

Пример

<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<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>
<ol>
<li>
Пункт
<ol>
<li>Подпункт</li>
<li>Подпункт</li>
<li>Подпункт</li>
</ol>
</li>
<li>
Пункт
<ol>
<li>Подпункт</li>
<li>Подпункт</li>
</ol>
</li>
</ol>
</body>
</html>
  1. Пункт
    1. Подпункт
    2. Подпункт
    3. Подпункт
  2. Пункт
    1. Подпункт
    2. Подпункт

Читайте также

Свойство accent-color

Свойство accent-color определяет цвет акцента для некоторых элементов формы. Акцентом в данном сл...

Обращение к самому главному родительскому элементу

Псевдокласс :root определяет корневой элемент документа.<br><br>В HTML этот селектор ...

Свойство animation-fill-mode

Указывает, как нужно применять стили к объекту анимации до и после ее выполнения.

Свойство flex-wrap

Указывает, следует ли флексам располагаться в одну строку или можно занять несколько строк.<br...

Стиль input / textarea, отображающего в данный момент подсказки

Определяет стиль элемента input или textarea, который в данный момент отображает текст подсказки,...