counter()

Базовая Широко доступная

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

Функция counter() CSS функция возвращает строку, представляющую текущее значение именованного счётчика, если он существует.

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

Попробуйте

Синтаксис

/* Simple usage */
counter(counter-name);

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

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

Значения

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

<counter-name>: Идентификатор <custom-ident> счётчика, то же чувствительное к регистру имя, что используется со значениями свойств counter-reset и counter-increment. Имя счётчика не может начинаться с двух дефисов и не может быть none, unset, initial, или inherit.
<counter-style>: Имя <list-style-type>, имя <@counter-style> или функция symbols(), где имя стиля счётчика — numeric, alphabetic, или symbolic простой предопределённый стиль счётчика, сложный стиль счётчика для восточноазиатских или эфиопских языков, или другой предопределённый стиль счётчика. Если опущено, стиль счётчика по умолчанию — decimal.

Примечание: Для объединения значений счётчиков при вложенности используйте функцию counters(), которая предоставляет дополнительный параметр <string>.

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

<counter()> = 
  counter( <counter-name> , <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>* )

Примеры

lower-roman по сравнению с lower-alpha

В этом примере мы отображаем счётчик, используя стили списка lower-roman и lower-alpha.

HTML

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

CSS

ol {
  counter-reset: count;
}
li {
  counter-increment: count;
}
li::after {
  content:
    "[" counter(count, lower-roman) "] == ["
    counter(count, lower-alpha) "]";
}

Результат

Отображение счётчика с использованием трёх стилей

В этом примере мы трижды используем функцию counter().

HTML

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

CSS

Мы включили функцию counter() с тремя разными стилями счётчика, включая значение по умолчанию – десятичное. Мы добавили отступы в список, чтобы обеспечить место для длинной строки ::marker.

ol {
  counter-reset: listCounter;
  padding-left: 5em;
}
li {
  counter-increment: listCounter;
}
li::marker {
  content:
    "Item #" counter(listCounter) " is: ";
}
li::after {
  content:
    "[" counter(listCounter, decimal-leading-zero) "] == ["
    counter(listCounter, upper-roman) "]";
}

Результат

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

Спецификация
CSS Списки и счётчики Модуль уровня 3 # counter-functions

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

	Рабочие столы					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`counter`	1	12	1	9.2	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/counter