HTML теги
CSS властивості
ГлавнаяВластивості CSSАтрибут counter-increment в CSS

Атрибут counter-increment в CSS

842

Стильова властивість counter-increment призначена для збільшення значення лічильника прирощень, що задається властивістю counter-reset. Такий лічильник підраховує кількість відображень елементів на сторінці і може виводитися за допомогою content та псевдоелементів ::after та ::before. Це дозволяє створювати списки (у тому числі багаторівневі), в яких нумерація та вид задаються через стилі.

Коротка інформація

Значення за замовчуванням none
Спадковується Ні
Застосовується До всіх елементів
Анімується Ні

Синтаксис 

<code>counter-increment: [<змінна> | <число>?]+ none

Позначення

Опис Приклад
<тип> Вказує тип значення. <розмір>
A && B Значення повинні виводитися у вказаному порядку. <розмір> && <колір>
A | B Вказує, що потрібно вибрати лише одне значення із запропонованих (A або B). normal | small-caps
A || B Кожне значення може використовуватися самостійно або спільно з іншими у довільному порядку. width || count
[ ] Групує значення. [ crop || cross ]
* Повторювати нуль або більше разів. [,<час>]*
+ Повторювати один або більше разів. <число>+
? Вказаний тип, слово або група не є обов'язковим. inset?
{A, B} Повторювати не менше A, але не більше B разів. <радіус>{1,4}
# Повторювати один або більше разів через кому. <час>#

Значення

none
Забороняє збільшення лічильника для поточного селектора.
<змінна>
Вказує одну або кілька змінних, для яких потрібно змінити значення лічильника. Змінні розділяються між собою пробілом.
<число>
Визначає значення збільшення лічильника. За замовчуванням воно дорівнює 1. Допускається використовувати тільки цілі позитивні числа, негативні цілі числа і нуль.

Поєднання значень властивостей counter-reset та counter-increment показано в табл.  1.

table>

Приклад

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>counter-increment</title> <style> body { counter-reset: heading; /* Ініціюємо лічильник */
} 
h2:before { counter-increment: heading; /* Вказуємо ідентифікатор лічильника */
content: "Глава " counter(heading) ". "; /* Виводимо текст перед вмістом тега <h2> */
}
</style>
</head>
<body> <h2>Теорія лову лева в пустелі</h2> <h2>Методи інверсної кінематики</h2> <h2>Лов лева чисельними методами</h2>
</body>
</html>

Результат цього прикладу показаний на рис. 1.

Застосування якості counter-increment

Мал. 1. Застосування якості counter-increment

Об'єктна модель

Об'єкт.style.counterIncrement

Примітка

Для елементів, у яких встановлено display: none, значення лічильника не змінюється.

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

Табл. 1. Зміна нумерації списку
Код Результат 
li { list-style-type: none; } 
ol { counter-reset: list-1; } 
li::before { counter-increment: list; content: counter(list) ". "; }

Список починається з нуля.

0, 1, 2 

li { list-style-type: none; } 
ol { counter-reset: list; } 
li::before { counter-increment: list 2; content: counter(list) ". "; }

Виводяться всі парні числа.

2, 4, 6 

li { list-style-type: none; } 
ol { counter-reset: list-1; } 
li::before { counter-increment: list list; content: counter(list) ". "; }

Виводяться всі непарні числа.

1, 3, 5 

li { list-style-type: none; } 
ol { counter-reset: list 9; } 
li::before { counter-increment: list; content: counter(list) ". "; }

Список починається з 10.

10, 11, 12

Специфікація Статус
CSS Lists and Counters Module Level 3 Робочий проект
CSS Level 2 Revision 1 (CSS 2.1) Рекомендація

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

Кожна специфікація проходить кілька стадій схвалення.

  • Recommendation (Рекомендація) — специфікація схвалена W3C і рекомендована як стандарт.
  • Candidate Recommendation (Можлива рекомендація) — група, яка відповідає за стандарт, задоволена, як він відповідає своїм цілям, але потрібна допомога спільноти розробників з реалізації стандарту.) — на цьому етапі документ представлений на розгляд Консультативної ради W3C для остаточного затвердження. та внесення поправок для розгляду спільнотою.
  • Editor's draft (Редакторська чернетка) — чорнова версія стандарту після внесення змін до редакторів проекту.
  • Draft (Чернетка специфікації) — перша чорнова версія стандарту.

Браузери

8 12 2 9.2 3 1
table>

Браузери

У таблиці браузерів застосовуються такі позначення.

  •   ;— властивість повністю підтримується браузером з усіма допустимими значеннями;
  •  — властивість браузером не сприймається та ігнорується;
  •  — при роботі можлива поява різних помилок, або властивість підтримується лише частково, наприклад, не всі допустимі значення я діє або властивість застосовується не до всіх елементів, які вказані в специфікації.

Кількість вказує версію браузера, починаючи з якої властивість підтримується.

© Htmlbook - довідник HTML і CSS, 2025. Працює на MaxSite CMS
2.1 1 9.5 3