Урок 24 із 104
23%
← Назад

Автоматична нумерація елементів у CSS

Вивчаємо CSS-лічильники counter-reset та counter-increment для автоматичної нумерації елементів сторінки.

Автоматична нумерація елементів у CSS

CSS дозволяє автоматично нумерувати елементи без використання JavaScript. Для цього використовуються лічильники CSS (counters).

  • counter-reset — створює або скидає лічильник.
  • counter-increment — збільшує значення лічильника.
  • counter() — виводить поточне значення лічильника.

Створення простого лічильника

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


.list {
  counter-reset: item;
}

.list li {
  counter-increment: item;
}

.list li::before {
  content: counter(item) ". ";
}

<ul class="list">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

1. HTML
2. CSS
3. JavaScript

Нумерація заголовків

CSS-лічильники часто використовують для нумерації розділів документа або заголовків.


body {
  counter-reset: section;
}

h2 {
  counter-increment: section;
}

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

<h2>Встановлення HTML</h2>
<h2>Основи CSS</h2>
<h2>Робота з JavaScript</h2>

Додавання символу № перед номером

У властивості content можна додати будь-який текст перед значенням лічильника.


h2::before {
  content: "№" counter(section) " ";
}

№1 Встановлення HTML
№2 Основи CSS
№3 Робота з JavaScript
❗ Важливо:

CSS-лічильники зручні для створення змісту, нумерації списків, розділів документа та інших елементів без додаткового коду.

Практичні завдання

📌 Завдання:
  1. №1. Дані заголовки. Зробіть так, щоб перед кожним заголовком стояв його номер.
  2. №2. Додайте перед кожним номером знак №.

<!-- Початковий код -->

<h2>Перший розділ</h2>
<h2>Другий розділ</h2>
<h2>Третій розділ</h2>
💡 Показати підказку

Створіть лічильник через counter-reset для батьківського елемента. Для заголовків використайте counter-increment.

✅ Показати відповідь

body {
  counter-reset: title;
}

h2 {
  counter-increment: title;
}

h2::before {
  content: "№" counter(title) ". ";
}