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

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

автор: Svitlana

правити

name

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

автор: Svitlana

правити

number

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

автор: Svitlana

правити

initial

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

автор: Svitlana

правити

inherit

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

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	2	1	3	9.2	12	8

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	25	1

Приклади

+ запропонувати свій приклад у пісочниці

<h1>Вступ</h1>
<h2>Історія</h2>
<h2>Сьогодення</h2>
<h1>Практика</h1>
<h2>Приклади</h2>

body {
    counter-reset: section;
}

h1 {
    counter-reset: subsection;
}

h1::before {
    counter-increment: section;
    content: "Розділ " counter(section) ". ";
}

h2::before {
    counter-increment: subsection;
    content: counter(section) "." counter(subsection) " ";
}