css властивість counter-increment


Властивість counter-increment збільшує значення лічильника, який задається властивістю counter-reset.

В данному прикладі нумерація реалізована за допомогою властивості counter-increment.

Властивість `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) " "; 
}

Додаткові посилання

Всі Коментарі (0)

Зареєструйся на сайті, аби мати змогу залишати коментарі. Зареєструватися  чи
Немає Коментарів