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

Свойство counter-set CSS задаёт элементу значения счётчиков CSS.

Если счётчики не существуют, свойство counter-set создаёт новый счётчик для каждого именованного счётчика в списке пар «счётчик и значение», разделённых пробелами. Однако для создания нового счётчика рекомендуется использовать свойство CSS counter-reset.

Если для именованного счётчика в списке не указано значение, его значение будет установлено в 0.

Попробуйте

counter-set: none;

counter-set: chapter-count 0;

counter-set: chapter-count;

counter-set: chapter-count 5;

counter-set: 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-set: chapter-count;
}

#example-element {
  background-color: #37077c;
  color: white;
}

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

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

Синтаксис

/* Set "my-counter" to 0 */
counter-set: my-counter;

/* Set "my-counter" to -1 */
counter-set: my-counter -1;

/* Set "counter1" to 1, and "counter2" to 4 */
counter-set: counter1 1 counter2 4;

/* Cancel any counter that could have been set in less specific rules */
counter-set: none;

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

Значения

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

<custom-ident>

Имя счётчика, которому нужно задать значение.

<integer>

Значение, которое будет задано счётчику при каждом появлении элемента. Если значение не указано, по умолчанию используется 0. Если на элементе ещё нет счётчика с указанным именем, элемент создаст новый счётчик с этим именем, начальное значение которого будет 0 (однако затем это значение может быть сразу же установлено или увеличено до другого).

none

Счётчик не устанавливается. Это можно использовать, чтобы переопределить counter-set, заданное в менее специфичном правиле.

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

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

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

<counter-name> = 
  <custom-ident>

<integer> = 
  <number-token>

Примеры

Установка именованных счётчиков

h1 {
  counter-set: chapter section 1 page;
  /* Sets the chapter and page counters to 0,
     and the section counter to 1 */
}

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

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

См. также

• Использование счётчиков CSS
• counter-increment
• counter-reset
• @counter-style
• Функции counter() и counters()
• Свойство content
• Модуль списков и счётчиков CSS
• Модуль стилей счётчиков CSS