Описание тега css-counter
Описание
Счетчики CSS - это переменные, которые поддерживаются и управляются правилами CSS для подсчета количества их использования в документе.
Контр-манипуляции
Значение переменной счетчика можно изменить с помощью любого из следующих свойств:
Сброс счетчика - устанавливает значение счетчика либо на 0 (по умолчанию), либо на указанное значение. Это первый шаг в использовании счетчиков, поскольку он инициализирует переменную счетчика.
Синтаксис counter-reset: [counter-name] [value].
Одновременно можно сбросить несколько счетчиков, указав имена счетчиков и их значения через пробел (например, counter-reset: counter1 3 counter2 5;).
Приращение счетчика - увеличивает значение счетчика каждый раз, когда соблюдается правило селектора CSS. По умолчанию приращение равно 1, но аналогично свойству сброса счетчика, здесь также можно указать коэффициент приращения.
Синтаксис counter-increment: [counter-name] [incrementation-factor].
Опять же, аналогично свойству сброса счетчика, здесь также можно увеличивать несколько счетчиков одновременно, используя список, разделенный пробелами.
Отображение значения счетчика
Все значения счетчика в настоящее время можно отобразить только с помощью contentсвойство псевдоэлемента. Также можно стилизовать счетчик, указав стиль в качестве второго аргумента. Список поддерживаемых значений такой же, как и для свойства list-style-type.
Синтаксис content: counter([counter-name], [counter-style]).
Значения счетчика недоступны за пределами CSS (то есть их значение в настоящее время не может быть прочитано с помощью JavaScript или подобных).
Пример: Ниже приведен образец фрагмента, в котором подсчитывается число "нет". строк в таблице и динамически добавляет номер строки к каждой строке. Вот образец скрипта, который показывает в действии приведенный ниже код.
table {
counter-reset: rows; /* initialize the counter */
}
tr {
counter-increment: rows; /* increment the counter for every tr encountered */
}
td:first-child:before {
content: counter(rows)". "; /* display the value of the counter */
}