`counter-set`

Свойство, которое управляет точным числовым значением существующих CSS-счётчиков.

Время чтения: меньше 5 мин

Кратко

С помощью свойства counter-set можно указать конкретное числовое значение определённому счётчику.

Пример

Установим числовое значение 25 для счётчика example на элементе <li>:

        
          
          li {  counter-set: example 25;}
          li {
  counter-set: example 25;
}

Допустим, нам нужно изменить порядок нумерации глав в оглавлении, чтобы после 3 главы шла сразу 9:

        
          
          <section class="table-of-contents">  <h1 class="title">Оглавление</h1>  <h2 class="chapter">HTML и CSS</h2>  <h2 class="chapter">Создание стилей и таблиц стилей</h2>  <h2 class="chapter">Селекторы: выбор форматируемых элементов</h2>  <h2 class="chapter change-value">Механизм наследования стилей</h2>  <h2 class="chapter">Управление сложной структурой стилей: каскад</h2>  <h2 class="chapter">Поля, отступы, границы</h2></section>
          <section class="table-of-contents">
  <h1 class="title">Оглавление</h1>
  <h2 class="chapter">HTML и CSS</h2>
  <h2 class="chapter">Создание стилей и таблиц стилей</h2>
  <h2 class="chapter">Селекторы: выбор форматируемых элементов</h2>
  <h2 class="chapter change-value">Механизм наследования стилей</h2>
  <h2 class="chapter">Управление сложной структурой стилей: каскад</h2>
  <h2 class="chapter">Поля, отступы, границы</h2>
</section>

На элементе <section> создаём счётчик с именем chapter и начальным значением 0:

        
          
          .table-of-contents {  counter-reset: chapter 0;}
          .table-of-contents {
  counter-reset: chapter 0;
}

Увеличиваем значения счётчика сhapter на элементах <h2> и устанавливаем конкретное числовое значение для 4 главы, а так же подставляем значение счётчика chapter через функцию counter():

        
          
          .chapter {  counter-increment: chapter 1;}.change-value {  counter-set: chapter 9;}.chapter::before {  content: "Глава "counter(chapter) ": ";}
          .chapter {
  counter-increment: chapter 1;
}

.change-value {
  counter-set: chapter 9;
}

.chapter::before {
  content: "Глава "counter(chapter) ": ";
}

Открыть демо в новой вкладке

Как понять

Свойство, которое может установить точное числовое значение счётчика.

Как пишется

В значении свойства нужно указать имя счётчика и число.

По умолчанию начальное числовое значение равно 0, если не указано иное.

Здесь значение счётчика example будет равно 0:

        
          
          li {  counter-set: example;}
          li {
  counter-set: example;
}

Чтобы не изменять числовое значение счётчика, можно указать ключевое слово none — это значение по умолчанию.

        
          
          li {  counter-set: none;}
          li {
  counter-set: none;
}

Аргументы

Создавать новые счётчики может не только свойство counter-reset. Представим такую ситуацию, что вы применили на элемент только свойство counter-set и указали в его значении имя несуществующего счётчика.

        
          
          li {  counter-set: new 2;}
          li {
  counter-set: new 2;
}

В таком случае на элементе <li> создастся новый счётчик с именем new и начальным значением 0. После создания счётчика, свойство counter-set начинает действовать как обычно.

Имена счётчиков чувствительны к регистру. Например, значения example и EXAMPLE — это два разных, не связанных между собой счётчика.

Нельзя использовать ключевые слова: none, initial, inherit, unset, default в качестве названий счётчиков.

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

        
          
          li {  counter-set: count1 -1 count2 99;}
          li {
  counter-set: count1 -1 count2 99;
}