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

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

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

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