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 для відображення значення лічильника.

Синтаксис

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

<name>

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

<style>

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

<counter-reset>

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

Переглядачі

• Стаціонарні переглядачі
• Мобільні переглядачі

Приклади

• Приклад 1
• Приклад 2