`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:

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

Устанавливаем увеличение значения счётчика сhapter и устанавливаем конкретное числовое значение. Подставляем значение счётчика chapter через функцию counter():

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

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

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

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

Как понять

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

Как пишется

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

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

Значение счётчика example на элементе li равно 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;
}