counter(), counters()

Сами по себе счётчики не имеют видимого эффекта, но их значения можно использовать с помощью функций counter() и counters().

В следующем примере показано простое использование функции counter():

        
          
          <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">Механизм наследования стилей</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">Механизм наследования стилей</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, используя свойство counter-increment. Далее подставляем значение счётчика chapter через функцию counter():

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

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Функция counters() прекрасно подходит для нумерации вложенных друг в друга списков.

Например, пронумеруем левую навигационную панель данной статьи при помощи функции counters():

        
          
          <ul class="table-of-contents">  <li class="paragraph"><a href="#kratko">Кратко</a></li>  <li class="paragraph"><a href="#primer">Пример</a>    <ul class="table-of-contents">      <li class="paragraph"><a href="#counter">counter()</a></li>      <li class="paragraph"><a href="#counters">counters()</a></li>    </ul>  </li>  <li class="paragraph"><a href="#kak-ponyat">Как понять</a></li>  <li class="paragraph"><a href="#kak-pishetsya">Как пишется</a></li>  <li class="paragraph"><a href="#argumenty">Аргументы</a></li></ul>
          <ul class="table-of-contents">
  <li class="paragraph"><a href="#kratko">Кратко</a></li>
  <li class="paragraph"><a href="#primer">Пример</a>
    <ul class="table-of-contents">
      <li class="paragraph"><a href="#counter">counter()</a></li>
      <li class="paragraph"><a href="#counters">counters()</a></li>
    </ul>
  </li>
  <li class="paragraph"><a href="#kak-ponyat">Как понять</a></li>
  <li class="paragraph"><a href="#kak-pishetsya">Как пишется</a></li>
  <li class="paragraph"><a href="#argumenty">Аргументы</a></li>
</ul>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Устанавливаем увеличение значения счётчика paragraph, использовав свойство counter-increment. Далее подставляем значение счётчика paragraph через функцию counters():

        
          
          .paragraph {  counter-increment: paragraph 1;}.paragraph::marker {  content: counters(paragraph, '.');}
          .paragraph {
  counter-increment: paragraph 1;
}

.paragraph::marker {
  content: counters(paragraph, '.');
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Функции counter() и counters() служат для того, чтобы возвращать текущее значение счётчика. Передавая функции аргумент в виде имени счётчика вернётся значение этого счётчика.

Подробнее о различиях функций counter() и counters() написано в статье Счётчики в CSS.

Но если вкратце, функция counter() возвращает значение самого последнего счётчика с указанным именем в наборе всех CSS-счётчиков, которые унаследовал элемент.

Функция counters(), в свою очередь, возвращает значения всех счётчиков в наборе CSS-счётчиков с указанным именем, которые унаследовал элемент.

Функции counter() и counters() обычно используются в связке с псевдоэлементами и свойством content.

Чтобы подставить значение счётчика на место псевдоэлемента, нужно указать функцию counter() или counters() в качестве значения свойства content и передать ей аргумент — имя счётчика. В примере ниже это будет счётчик chapterNum:

        
          
          li::marker {  content: counters(chapterNum, '.');}h2::before {  content: counter(chapterNum);}
          li::marker {
  content: counters(chapterNum, '.');
}
h2::before {
  content: counter(chapterNum);
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Если используется функция counters() важно указать вторым аргументом разделитель в виде строки, которая будет разделять значения всех счётчиков с указанным именем.

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

        
          
          h2::before {  content: counter(new);}
          h2::before {
  content: counter(new);
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

В таком случае создастся новый счётчик с именем new и начальным значением 0. После создания счётчика, функция counter() или counters() начинает действовать как обычно.

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

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

В обеих функциях есть необязательный аргумент, который указывает стиль счётчика, например, вместо использования десятичной системы счисления — данное значение устанавливается по умолчанию, можно указать заглавную римскую нумерацию, то есть тип upper-roman:

        
          
          .paragraph::marker {  content: counters(paragraph, '.', upper-roman);}.chapter::before {  content: "Глава "counter(chapter, upper-roman) ": ";}
          .paragraph::marker {
  content: counters(paragraph, '.', upper-roman);
}
.chapter::before {
  content: "Глава "counter(chapter, upper-roman) ": ";
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Более подробно о других значениях можно посмотреть в доке по свойству list-style-type.