CSS счетчики, в своей сущности, переменные CSS, значения которых могут быть инкрементированы при помощи CSS для отслеживания количества их использования. Они позволяют регулировать внешний вид контента, основываясь на его местоположении в документе. CSS счетчики реализованы в CSS 2.1 (ссылка на спецификацию).
Значение счетчика сбрасывается (инициализируется) при помощи counter-reset
.
counter-increment
может быть отображен на странице, используя функцию counter() или counters() в свойстве
content
.
Использование счетчиков
Для того, чтобы использовать CSS счетчики, сначала необходимо сбросить их значение (0 по умолчанию). Для того, чтобы отобразить значение счетчика - используйте функцию counter(). Следующий пример прибавляет в начале каждого h3 элемента
"Section <значение счетчика>:".
body {
counter-reset: section; /* Устанавливает значение
счетчика, равным 0 */
}
h3::before {
counter-increment: section; /* Инкрементирует счетчик*/
content: "Секция " counter(section) ": "; /* Отображает текущее
значение счетчика */
}
Пример:
<h3>Вступление</h3>
<h3>Основная часть</h3>
<h3>Заключение</h3>
Вложенные счетчики
CSS счетчики могут быть очень полезны для создания нумерованых списков, потому что новая сущность CSS счетчика автоматически создается в дочерних элементах. Используя функцию counters(), можно вставить строку между разными уровнями вложенных счетчиков. Пример:
ol {
counter-reset: section; /*Создает новый счетчик для каждого
тега <ol>*/
list-style-type: none;
}
li::before {
counter-increment: section; /*Инкрементировуется только счетчик
текущего уровня вложенности*/
content: counters(section,".") " ";/*Добавляем значения всех уровней
вложенности, используя разделитель '.'*/
/*Если необходима поддержка < IE8,
необходимо убедиться, что после
разделителя ('.') не стоит пробел*/
}
Обьединим с данным HTML:
<ol>
<li>item</li> <!-- 1 -->
<li>item <!-- 2 -->
<ol>
<li>item</li> <!-- 2.1 -->
<li>item</li> <!-- 2.2 -->
<li>item <!-- 2.3 -->
<ol>
<li>item</li> <!-- 2.3.1 -->
<li>item</li> <!-- 2.3.2 -->
</ol>
<ol>
<li>item</li> <!-- 2.3.1 -->
<li>item</li> <!-- 2.3.2 -->
<li>item</li> <!-- 2.3.3 -->
</ol>
</li>
<li>item</li> <!-- 2.4 -->
</ol>
</li>
<li>item</li> <!-- 3 -->
<li>item</li> <!-- 4 -->
</ol>
<ol>
<li>item</li> <!-- 1 -->
<li>item</li> <!-- 2 -->
</ol>
Результат:
Спецификации
Specification | Status | Comment |
---|---|---|
CSS Lists Module Level 3 Определение 'CSS Counters' в этой спецификации. |
Рабочий черновик | Без изменений |
CSS Level 2 (Revision 1) Определение 'CSS Counters' в этой спецификации. |
Рекомендация | Изначальное определение |