counters()

Baseline Широко распространённый

Эта функция хорошо отработана и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с июля 2015 года.

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

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

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

Попробуйте

Синтаксис

/* Simple 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>: Любое количество символов текста. Нелатинские символы должны быть закодированы с помощью последовательностей экранирования Unicode: например, \000A9 представляет символ авторского права.
<counter-style>: Имя стиля счётчика или функция symbols(). Имя стиля счётчика может быть простым предопределённым стилем, таким как числовой, буквенный или символьный, сложным предопределённым стилем, таким как восточноазиатский или эфиопский, или другим предопределённым стилем счётчика. Если опущен, стиль счётчика по умолчанию — десятичный.

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

Примечание: Сведения о неконкатенированных счётчиках см. в функции counter(), которая опускает параметр <string>.

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

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

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

<symbols()> = 
  symbols( <symbols-type>? [ <string> | <image> ]+ )  

<symbols-type> = 
  cyclic      |
  numeric     |
  alphabetic  |
  symbolic    |
  fixed       

<image> = 
  <url>       |
  <gradient>  

<url> = 
  <url()>  |
  <src()>  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )

Примеры

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

В этом примере две функции 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 списков и счётчиков уровня 3 # counter-functions

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

	Рабочие столы					Мобильные телефоны
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`counters`	1	12	1.5	10	3	18	4	10.1	1	1.0	4.4

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/counters