css.in.ua
Підтримати

CSS function counter()

Опис

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

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

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

body {
  counter-reset: my-counter;
}

h1::before {
  content: counter(my-counter) ". ";
  counter-increment: my-counter;
}

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

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

Порада:

Використовуйте counter() разом з псевдокласами counter-reset та псевдоелементами ::before або ::after, щоб створювати лічильники.
Порада:

Зверніть увагу на правильне форматування та стиль лічильника, щоб відповідати вашим потребам дизайну.
Нотатка:

Значення за замовчуванням (fallback) використовується, якщо лічильник не визначено, тому обережно встановлюйте його, щоб забезпечити правильне відображення, якщо лічильник не існує.
Нотатка:

Зверніть увагу, що функція counter() має багато варіантів використання та комбінацій з іншими CSS властивостями, такими як list-style та content.

Синтаксис

counter(name, style, fallback);
<name>

Рядок, що представляє ім'я лічильника.

<style>

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

<fallback>

Рядок або число, яке використовується як значення лічильника, якщо лічильник не визначено.

Переглядачі

Переглядач

1

1

3

9.2

12
Переглядач

4.4

18

4

1

Мобільних переглядачів ще не додано.

Приклади


У цьому прикладі, кожен пункт списку має власне унікальне значення лічильника. За допомогою селекторів nth-child, ми можемо встановити початкове значення лічильника для кожного пункту. Перший пункт списку має значення лічильника 1 (за замовчуванням), другий пункт має значення 5, а третій пункт має значення 10.

У цьому прикладі, окремий елемент списку буде виділено відмінним кольором, використовуючи лічильник.

Документи

Зв'язок