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;
}