CSS function counters

Опис

Функція counters() в CSS використовується для створення лічильника з вкладеними значеннями (ієрархічним лічильником), який можна використовувати для нумерації елементів в документі з урахуванням їхньої вкладеності. Ця функція дозволяє створювати більш складні нумераційні схеми, де значення лічильників залежать від структури елементів на сторінці.

Функція counters() використовується разом з властивістю counter-reset, яка визначає початкове значення лічильників, та властивістю content, яка визначає спосіб відображення значення лічильників. Особливістю функції counters() є можливість вкладення значень лічильників за допомогою розділювача.

Ось короткий приклад використання функції counters():

body {
  counter-reset: section;
}

h1::before {
  content: counters(section, ".") " ";
  counter-increment: section;
}

h2::before {
  content: counters(section, ".") " ";
  counter-increment: section;
}

У цьому прикладі ми використовуємо функцію counters() для створення ієрархічного лічильника для заголовків h1 і h2. Кожен заголовок буде мати власну нумерацію, враховуючи вкладеність. Значення лічильника обнуляється за допомогою counter-reset, а потім збільшується за допомогою counter-increment. Функція counters() використовується в content для відображення значення лічильника.

автор: Bond

Порада: Використовуйте унікальні імена лічильників для відображення різних значень в різних контекстах.
автор: Bond
Порада: Експериментуйте з різними стилями форматування, щоб створювати власний вигляд лічильників.
автор: Bond
Порада: Для використання функції counters() потрібно встановити значення лічильника за допомогою властивості counter-reset або змінити значення лічильника засобами CSS-селекторів та псевдокласів.
автор: Bond
Порада: Значення лічильника можуть бути змінними або фіксованими числами, залежно від використання counter-reset та CSS-селекторів.
автор: Bond
Нотатка: Використання функції counters() дозволяє вам створювати ієрархічну нумерацію елементів з урахуванням їхньої вкладеності. Ви можете використовувати цю функцію для створення складних нумераційних схем, таких як нумерація розділів і підрозділів, списків з підпунктами тощо.
автор: Bond

Синтаксис

counters(<name>, <style>, <counter-reset>);

Функція counters може отримувати 3 значень:

<name>

Рядок або комбінація рядків, що представляють ім'я лічильника або лічильників, розділених комами.

автор: Bond

<style>

Рядок, що представляє стиль форматування лічильника. Деякі приклади: decimal, lower-roman, upper-alpha і т.д.

автор: Bond

<counter-reset>

Число або ідентифікатор лічильника, що встановлює початкове значення лічильника.

автор: Bond

Переглядачі

Підтримка: стаціонарні переглядачі
Переглядач
	1	1.5	3	10	12

Підтримка: мобільні переглядачі
Переглядач
	4.4	18	4	1

Приклади

+ запропонувати свій приклад у пісочниці

Використання функції counters() для створення списків.

автор: Bond

Використання функції counters() для створення списків.

автор: Bond

Коментарі

Коментарів ще немає — будьте першим!