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


Властивість counter-reset встановлює змінну, в якій буде зберігатися лічильник відображень певного елемента, а також початкове значення цього лічильника.

article {

  counter-reset: section;

}

section {

  counter-increment: section;

}

section h2:before {

  content: counter(section) '. ';

}

Лічильник може виводитися за допомогою властивості content та псевдо елементів :after чи :before.

Кожен елемент має набір лічильників, які успадковуються через дерево документів. Лічильники мають ім'я, ціле значення та елемент-творець. Вони також можуть мати ще один вкладений лічильник.

Властивість counter-reset створює один або кілька нових лічильників для елементу. Кожен лічильник має ім'я / ідентифікатор і підрахунок, пов'язаний з цим ідентифікатором.

Синтаксис

counter-reset: none|name number|initial|inherit;

Властивість counter-reset може отримувати 5 значень:

none

Забороняє ініціацію лічильника для поточного селектора

name

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

number

Початкове значення кожного ідентифікатора. Без задання дорівнює 0

initial

Встановлює властивість у значення без задання

inherit

Вказує на спадковість властивості від свого батьківського елемента

Значення без задання: none
Наслідує: Ні
Анімується: Ні
JavaScript синтаксис: object.style.counterReset="section"

Переглядачі

Переглядач
counter-reset

2.0

8.0

1.0

3.0

9.2

12.0

Переглядач
counter-reset

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) " "; 


}	

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