CSS приклад: counter-increment

Тег CSS: counter-increment (збільшення лічильника)

Стилеве властивість counter-increment використовується для збільшення значення лічильника, який встановлюється властивістю counter-reset. Цей лічильник підраховує кількість відображень елементів на сторінці і може бути виведений за допомогою властивості content та псевдоелементів :after і :before. Це дозволяє створювати списки (включаючи багаторівневі), в яких нумерація та вигляд встановлюються за допомогою стилів.

Синтаксис

counter-increment: none | inherit | ідентифікатор | ціле число

Значення

none
Забороняє збільшення лічильника для поточного селектора.
inherit
Наслідує значення батька.
ідентифікатор
Встановлює одну або кілька змінних, для яких потрібно змінити значення лічильника. Змінні розділяються пробілом між собою.
ціле число
Визначає значення приросту лічильника. За замовчуванням воно дорівнює 1. Дозволяється використовувати від'ємні та нульові значення.

Можливі поєднання значень властивостей counter-reset та counter-increment показані в табл. 1.

Табл. 1. Зміна нумерації списку
КодРезультат
LI { list-style-type: none; }

OL { counter-reset: list -1; }

LI:before {

counter-increment: list;

content: counter(list) ". ";

}

Список починається з нуля.

0, 1, 2

Приклад

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>counter-increment</title>
  <style>
   body {
    counter-reset: heading; /* Ініціюємо лічильник */
   }
   h2:before {
    counter-increment: heading; /* Вказуємо ідентифікатор лічильника */
    content: "Глава " counter(heading) ". "; /* Виводимо текст перед вмістом тега <h2> */
   }
  </style>
 </head>
 <body>
  <h2>Теорія ловлі лева в пустелі</h2>
  <h2>Методи інверсної кінематики</h2>
  <h2>Ловля лева чисельними методами</h2>
 </body>
</html>

Примітка

Для елементів, у яких встановлено display: none, значення лічильника не змінюється.

Контент

Часті запитання

  • Q: Як використовувати counter-increment в CSS?

    A: Counter-increment використовується для збільшення значення лічильника при відображенні кожного нового елемента.

  • Q: Як задати початкове значення лічильника при використанні counter-increment?

    A: Початкове значення лічильника можна задати за допомогою властивості 'counter-reset'.

  • Q: Де можна використовувати counter-increment в CSS?

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

  • Q: Як відобразити значення лічильника на сторінці за допомогою counter-increment?

    A: Для відображення значення лічильника на сторінці можна використовувати функцію 'counter()'.

  • Q: Чи підтримується counter-increment у всіх браузерах?

    A: Counter-increment підтримується у більшості сучасних браузерах, але можуть бути деякі відмінності в підтримці в залежності від версії браузера.