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

<h1>HTML</h1>	
<p>Самий початок...</p>

<h1>CSS</h1>
<p>Трохи більше, ніж початок.</p>

<h1>JavaScript</h1>	
<p>Не початок, але і не кінець.</p>

body {
  line-height: 0.8em;
  counter-reset: chapter;
}

h1 {
  font-size: 18px;
}

h1:before {
  content: "Частина № " counter(chapter) ": ";
  counter-increment: chapter;
}

<p>counter-reset на пункті:</p>
<ol class="wrong">
    <li>перший</li>
    <li>другий</li>
    <li>третій</li>
</ol>
<p>counter-reset на списку:</p>
<ol class="right">
    <li>перший</li>
    <li>другий</li>
    <li>третій</li>
</ol>

ol {
    padding: 0;
    list-style: none;
}
li::before {
    content: counter(n) ". ";
    font-weight: bold;
    color: #1e6fd9;
}
.wrong li {
    counter-reset: n;
    counter-increment: n;
}
.right {
    counter-reset: n;
}
.right li {
    counter-increment: n;
}