Свойство 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>-
Пункт
- Подпункт
- Подпункт
- Подпункт
-
Пункт
- Подпункт
- Подпункт
Читайте также
Свойство outline-style
Устанавливает стиль внешней границы элемента.<br><br>В отличие от линии, задаваемой ч...
Свойство cursor
Устанавливает форму курсора, когда он находится в пределах элемента. Вид курсора зависит от опера...
Универсальный селектор
Иногда требуется установить одновременно один стиль для всех элементов веб-страницы, например, за...
Стиль для переключателей в неопределённом состоянии
Применяется к полям формы, содержимое которых не соответствует указанному типу. Например, для typ...
Свойство opacity
Определяет уровень прозрачности элемента веб-страницы. При частичной или полной прозрачности чере...