css властивість counter-increment
Властивість counter-increment збільшує значення лічильника, який задається властивістю counter-reset.
В данному прикладі нумерація реалізована за допомогою властивості counter-increment.
Лічильник підраховує кількість зображених елементів на сторінці та може виводитися за допомогою властивості content і псевдо елементів ::after і ::before. Це дозволяє створювати списки (в тому числі багаторівневі), в яких нумерація і вид задаються через стилі.
Кожен елемент має набір нуля або більше лічильників. Лічильники мають ім'я, ціле значення та елемент-творець. Вони також можуть мати ще один вкладений лічильник.
Властивість counter-increment вказує на те, на скільки значення лічильника збільшується кожного разу. Приріст без задання дорівнює 1. Нульові та від'ємні цілі числа допускаються.
Властивість counter-increment приймає одне або декілька назв (ідентифікатори для лічильника), з кожним з них (за бажанням), за яким слідує ціле число (яке вказує на те, скільки потрібно збільшити чи зменшити кількість).
Можливі поєднання значень властивостей counter-reset і counter-increment показані нижче:
В данному випадку список починається з 0, 1, 2...
LI { list-style-type: none; }
OL { counter-reset: list -1; }
LI:before {
counter-increment: list;
content: counter(list) ". ";
}
В данному випадку виводяться всі парні числа 2, 4, 6...
LI { list-style-type: none; }
OL { counter-reset: list; }
LI:before {
counter-increment: list 2;
content: counter(list) ". ";
}
В данному випадку виводяться всі непарні числа 1, 3, 5...
LI { list-style-type: none; }
OL { counter-reset: list; }
LI:before {
counter-increment: list 2;
content: counter(list) ". ";
}
Синтаксис
counter-increment: none|id|initial|inherit;Властивість counter-increment може отримувати 4 значення:
noneЗабороняє збільшення лічильника для поточного селектора
id numberЗадає одну або кілька змінних, для яких потрібно змінити значення лічильника. Змінні поділяються між собою пропуском.
Якщо змінна відноситься до лічильника, який не був створений за допомогою властивості counter-reset, його початкове значення, без задання, дорівнюватиме 0.
Визначає значення приросту лічильника. Без задання воно дорівнює 1. Допускається використовувати тільки додатні цілі числа, від'ємні цілі числа та нуль.
initialВстановлює властивість у значення без задання
inheritВказує на спадковість властивості від свого батьківського елемента
| Значення без задання: | none |
|---|---|
| Наслідує: | Ні |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.counterIncrement = "subsection"; |
Переглядачі
| Переглядач | ||||||
|---|---|---|---|---|---|---|
| counter-increment | 2.0 |
8.0 |
1.0 |
3.0 |
9.2 |
12.0 |
| Переглядач | |||
|---|---|---|---|
| counter-increment | 2.1 |
1.0 |
3.0 |
Мобільних переглядачів ще не додано.
Приклади
Використання
Шлях до числа розділів і підрозділів з "Розділ 1", "1.1", "1.2" тощо
body {
counter-reset: section;
}
h1 {
counter-reset: subsection;
}
h1:before {
counter-increment: section;
content: "Section " counter(section) ". ";
}
h2:before {
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}