CSS counter-increment — крок лічильника нумерації

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

В данному прикладі нумерація реалізована за допомогою властивості 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

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

автор: Svitlana

правити

id number

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

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

Визначає значення приросту лічильника. Без задання воно дорівнює 1. Допускається використовувати тільки додатні цілі числа, від'ємні цілі числа та нуль.

автор: 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;
}

h1 {
  font-size: 18px;
}

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

<ol class="doc">
  <li>Вступ
    <ol>
      <li>Мета роботи</li>
      <li>Обсяг дослідження</li>
    </ol>
  </li>
  <li>Метод
    <ol>
      <li>Джерела даних</li>
    </ol>
  </li>
</ol>

body {
  font-family: sans-serif;
  font-size: 16px;
  padding: 16px;
}

/* скидання — на КОЖНОМУ списку, і зовнішньому, і вкладеному */
.doc,
.doc ol {
  counter-reset: sect;
  list-style: none;
  padding-left: 20px;
}

.doc li {
  counter-increment: sect;
  line-height: 1.7;
}

.doc li::before {
  content: counters(sect, ".") ". ";
  font-weight: bold;
  color: #06c;
}