CSS-функция `counters()`

counters() — CSS-функция, которая позволяет объединять маркеры при вложении счетчиков. Функция возвращает строку, объединяющую текущие значения именованного и вложенных счетчиков, если они есть, с указанной строкой. Третий необязательный параметр позволяет определить стиль списка.

Функция counters() обычно используется в псевдоэлементе с помощью свойства content, но теоретически её можно использовать везде, где поддерживается значение <string>.

Функция counters() имеет две формы: counters(<name>, <string>) и counters(<name>, <string>, <style>). Сгенерированный текст — это значение всех счетчиков с заданным <name>, расположенных от внешнего к внутреннему и разделённых указанным <string>. Счетчики отображаются в указанном <style>, а если <style> не задан, используется decimal.

Попробуйте

ol {
  counter-reset: index;
  list-style-type: none;
}

li::before {
  counter-increment: index;
  content: counters(index, ".", decimal) " ";
}

<ol>
  <li>Mars</li>
  <li>
    Saturn
    <ol>
      <li>Mimas</li>
      <li>Enceladus</li>
      <li>
        <ol>
          <li>Voyager</li>
          <li>Cassini</li>
        </ol>
      </li>
      <li>Tethys</li>
    </ol>
  </li>
  <li>
    Uranus
    <ol>
      <li>Titania</li>
    </ol>
  </li>
</ol>

Синтаксис

/* Basic usage  - style defaults to decimal */
counters(counter-name, '.');

/* changing the counter display */
counters(counter-name, '-', upper-roman)

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

Значения

Функция counters() принимает два или три параметра. Первый параметр — это <counter-name>. Второй параметр — строка-соединитель <string>. Необязательный третий параметр — это <counter-style>.

<counter-name>

<custom-ident>, задающий имя счетчиков. Это то же имя с учётом регистра, которое используется для свойств counter-reset и counter-increment. Имя не может начинаться с двух дефисов и не может быть none, unset, initial или inherit. Для встроенных счетчиков, используемых однократно, вместо именованного счетчика можно использовать функцию symbols() в браузерах с поддержкой symbols().

<string>

Любое количество текстовых символов. Символы нелатинских алфавитов необходимо кодировать с помощью escape-последовательностей Unicode: например, \000A9 обозначает символ авторского права.

<counter-style>

Имя стиля счетчика или функция symbols(). Именем стиля счетчика может быть предопределённый стиль, например numeric, alphabetic или symbolic, сложный предопределённый стиль с длинным названием, например East Asian или Ethiopic, либо другой предопределённый стиль счетчика. Если параметр опущен, по умолчанию используется стиль decimal.

Возвращаемое значение — это строка, содержащая все значения всех счетчиков из набора счетчиков CSS элемента с именем <counter-name> и стилем счетчика, заданным параметром <counter-style> (или decimal, если параметр опущен). Значения в возвращаемой строке упорядочены от внешнего к внутреннему и объединены указанным <string>.

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

<counters()> = 
  counters( <counter-name>, <string>, <counter-style>? )

<counter-name> = 
  <custom-ident>

<counter-style> = 
  <counter-style-name> |
  symbols()

<counter-style-name> = 
  <custom-ident>

Примеры

Сравнение значения счетчика по умолчанию с римскими цифрами в верхнем регистре

В этом примере используются две функции counters(): в одной задано значение <counter-style>, а для другой используется значение decimal по умолчанию.

HTML

<ol>
  <li>
    <ol>
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </li>
  <li></li>
  <li></li>
  <li>
    <ol>
      <li></li>
      <li>
        <ol>
          <li></li>
          <li></li>
          <li></li>
        </ol>
      </li>
    </ol>
  </li>
</ol>

CSS

ol {
  counter-reset: listCounter;
}
li {
  counter-increment: listCounter;
}
li::marker {
  content:
    counters(listCounter, ".", upper-roman) ") ";
}
li::before {
  content:
    counters(listCounter, ".") " == "
    counters(listCounter, ".", lower-roman);
}

Результат

Сравнение значения счетчика decimal-leading-zero со строчными буквами

В этом примере используются три функции counters(), каждая с разными значениями <string> и <counter-style>.

HTML

<ol>
  <li>
    <ol>
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </li>
  <li></li>
  <li></li>
  <li>
    <ol>
      <li></li>
      <li>
        <ol>
          <li></li>
          <li></li>
          <li></li>
        </ol>
      </li>
    </ol>
  </li>
</ol>

CSS

ol {
  counter-reset: count;
}
li {
  counter-increment: count;
}
li::marker {
  content:
    counters(count, "-", decimal-leading-zero) ") ";
}
li::before {
  content:
    counters(count, "~", upper-alpha) " == "
    counters(count,  "*", lower-alpha);
}

Результат

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

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

См. также

• Использование счетчиков CSS
• свойство counter-set
• свойство counter-reset
• свойство counter-increment
• правило @ @counter-style
• CSS-функция counter()
• псевдоэлемент ::marker
• модуль списков и счетчиков CSS
• модуль стилей счетчиков CSS
• модуль генерируемого содержимого CSS