Свойство CSS `counter-increment`

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

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

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

Попробуйте

counter-increment: chapter-count;

counter-increment: chapter-count 0;

counter-increment: chapter-count 5;

counter-increment: chapter-count -5;

<section class="default-example" id="default-example">
  <div class="transition-all" id="chapters">
    <h1>Alice's Adventures in Wonderland</h1>
    <h2>Down the Rabbit-Hole</h2>
    <h2 id="example-element">The Pool of Tears</h2>
    <h2>A Caucus-Race and a Long Tale</h2>
    <h2>The Rabbit Sends in a Little Bill</h2>
  </div>
</section>

#default-example {
  text-align: left;
  counter-reset: chapter-count;
}

#example-element {
  background-color: lightblue;
  color: black;
}

h2 {
  counter-increment: chapter-count;
  font-size: 1em;
}

h2::before {
  content: "Chapter " counter(chapter-count) ": ";
}

Синтаксис

/* 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;

Значения

Это свойство задаётся списком значений <custom-ident>, разделённых пробелами; после каждого из них может быть указан <integer>, либо ключевым словом none:

<custom-ident>

Задаёт имя счётчика, значение которого нужно увеличить или уменьшить.

<integer>

Задаёт значение, которое нужно прибавить к счётчику. Если перед целым числом стоит знак -, это значение будет вычтено из счётчика. Если значение не указано, по умолчанию используется 1.

none

Указывает, что ни один счётчик не должен увеличиваться или уменьшаться. Это значение также можно использовать, чтобы отменить увеличение или уменьшение всех счётчиков в более конкретных правилах. Это значение свойства по умолчанию.

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

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

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

<counter-name> = 
  <custom-ident>

<integer> = 
  <number-token>

Примеры

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

В этом примере мы выводим последовательность чисел в обратном порядке. Для этого используется счётчик, выводящий числа от 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

С помощью counter-reset задаём начальное значение счётчика с именем sevens равным 100. Затем для каждого элемента <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);
}

div {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 300px;
  width: 200px;
}
i {
  flex: 0 0 2em;
}

Результат

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

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

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

См. также

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