counters()

Функція CSS counters() (лічильники) дає змогу поєднувати маркери для вкладених лічильників. Вона повертає рядок, що зчіплює поточні значення названих і вкладених лічильників, якщо такі є, з переданим рядком. Третій, необов'язковий параметр, дає змогу визначити стиль списку.

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

Функція counters() має дві форми: counters(<name>, <string>) і counters(<name>, <string>, <style>). Породжений нею текст є значеннями усіх лічильників з заданою назвою <name>, упорядкованих від зовнішнього до внутрішнього, і сполучених заданим значенням <string>. Лічильники візуалізуються у заданому стилі <style>, що усталено має значення decimal, якщо жодний стиль не задано.

Спробуйте його в дії

Синтаксис

/* Просте використання  - стиль усталено decimal */
counters(countername, '.');

/* змінення виведення лічильника */
counters(countername, '-', 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>

Будь-яка кількість текстових символів. Нелатинські символи необхідно екранувати за допомогою їхніх послідовностей екранування Unicode: наприклад, \000A9 представляє символ авторського права.

<counter-style>

Назва стилю лічильника або функція symbols(). Назва стилю лічильника може бути простим наперед визначеним стилем, наприклад, числовим, алфавітним або символьним, складним розлогим наперед визначеним стилем, як-от східноазійським або ефіопським, або ще якимось наперед визначеним стилем лічильника. Якщо цей параметр пропустити, то стиль лічильника усталено стає десятковим.

Повернене значення – це рядок, що містить усі значення усіх лічильників у наборі лічильників CSS елемента, що мають назву <counter-name>, у стилі лічильників, визначеному <counter-style> (або десятковому стилі, якщо стиль не вказано).

[!NOTE] Інформацію про незчеплені лічильники дивіться на сторінці функції counter(), що не має параметра <string>

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

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

Результат

Порівняння значення лічильника з провідними нулями з малими літерами

Цей приклад містить три функції 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