counter-increment

Baseline Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с июля 2015 года.

Свойство counter-increment CSS можно использовать для увеличения или уменьшения значения именованных счётчиков CSS на указанные значения или для предотвращения изменения значения всех или отдельных счётчиков.

Если именованный счётчик в списке разделинных пробелами счётчиков и значений отсутствует, он будет создан. Если для счётчика в списке счётчиков не указано значение, счётчик будет увеличен на 1.

Значение счётчика можно сбросить на любое целое число с помощью свойства counter-reset CSS.

Попробуйте

Синтаксис

/* Increases "my-counter" by 1 */
counter-increment: my-counter;

/* Decreases "my-counter" by 1 */
counter-increment: my-counter -1;

/* Increases "counter1" by 1 and decreases "counter2" by 4 */
counter-increment: counter1 counter2 -4;

/* Increases "page" by 1, "section" by 2, while "chapter" doesn't change */
counter-increment: chapter 0 section 2 page;

/* Do not increment/decrement anything: used to override less specific rules */
counter-increment: none;

/* Global values */
counter-increment: inherit;
counter-increment: initial;
counter-increment: revert;
counter-increment: revert-layer;
counter-increment: unset;

Значения

Свойство counter-increment принимает в качестве значения либо список разделяемых пробелами имён счётчиков, заданных как <custom-ident> с необязательным значением <integer>, либо ключевое слово none. Вы можете указать любое количество счётчиков для увеличения, при этом каждое имя или имя-числовое пара должны быть разделены пробелом.

<custom-ident>: Указывает имя счётчика, который нужно увеличить или уменьшить.
<integer>: Указывает значение, которое нужно добавить к счётчику. Если перед целым числом стоит знак -, значение будет вычтено из счётчика. По умолчанию значение 1 используется, если оно не указано.
none: Указывает, что ни один счётчик не должен быть увеличен или уменьшен. Это значение также может использоваться для отмены увеличения или уменьшения всех счётчиков в более специфичных правилах. Это значение по умолчанию для свойства.

Примечание: Использование значения none предотвращает увеличение или уменьшение всех счётчиков для выбранных элементов, к которым применяется это правило. Чтобы предотвратить увеличение или уменьшение только определённых счётчиков, установите значение integer как 0 для соответствующих счётчиков.

Формальное определение

Начальное значение	`none`
Применяется к	всем элементам
Наследуется	нет
Вычисленное значение	как указано
Тип анимации	по типу вычисленного значения

Формальный синтаксис

counter-increment = 
  [ <counter-name> <integer>? ]+  |
  none

Примеры

Уменьшение значения счётчика

В этом примере отображается последовательность чисел, отсчитываемых назад. Для этого используется счётчик для отображения чисел, начиная с 100 и уменьшая на 7 каждый раз.

HTML

<div>
  <i></i><i></i><i></i><i></i><i></i><i></i><i></i> <i></i><i></i><i></i><i></i
  ><i></i><i></i><i></i> <i></i><i></i><i></i><i></i><i></i><i></i><i></i>
  <i></i><i></i><i></i><i></i><i></i><i></i><i></i>
</div>

CSS

Мы устанавливаем начальное значение счётчика с именем sevens на 100 с помощью counter-reset. Затем для каждого <i> мы уменьшаем счётчик на 7.

Чтобы установить первый счёт в 100, мы нацеливаемся на первый <i> элемент, используя псевдокласс :first-of-type и устанавливая counter-increment: none;. Кроме того, свойство content используется в псевдоэлементе ::before для отображения значения счётчика с помощью функции counter().

div {
  counter-reset: sevens 100;
}
i {
  counter-increment: sevens -7;
}
i:first-of-type {
  counter-increment: none;
}
i::before {
  content: counter(sevens);
}

Результат

Если бы мы не использовали counter-reset (или counter-set), чтобы создать счётчик и установить значение на 100, счётчик sevens всё равно был бы создан, но с начальным значением 0.

Спецификации

Спецификация
Модуль CSS списков и счётчиков уровня 3 # increment-set

Совместимость с браузерами

	Рабочий стол					Мобильный
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android
`counter-increment`	2	12	1	9.2	3	18	25	10.1	1	1.0	4.4
`list-item`	≤83	12	1	69	≤13.1	83	25	59	≤13.4	13.0	83
`none`	2	12	1	15	3	18	25	14	2	1.0	4.4

См. также

Свойства счётчиков: counter-set, counter-reset
Правило счётчика: @counter-style
Функции счётчика: counter(), counters()
Руководство по использованию счётчиков CSS
Модуль CSS списков и счётчиков
Модуль CSS стилей счётчиков

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/counter-increment