| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 8.0 + | 2.0 + | 9.2 + | 3.0 + | 1.0 + | 2.1 + | 2.0 + |
Коротка інформація
| Значення за умовчанням | none |
|---|---|
| Успадковується | Ні |
| Застосовується | До всіх елементів |
| Посилання на специфікацію | http://www.w3.org/TR/CSS21/generate.html#propdef-counter-reset |
Версії CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Опис
Встановлює ідентифікатор, в якому буде зберігатися лічильник відображень певного елемента, а також початкове значення лічильника. Такий лічильник може виводитися за допомогою властивості content і псевдоелементів : after і : before .
Синтаксис
counter-reset: none | inherit | ідентифікатор | ціле число
Значення
- none
- Забороняє ініціацію лічильника для поточного селектора.
- inherit
- Успадковує значення батька.
- код
- Задає одну або кілька змінних, в яких буде зберігатися значення лічильника. Значення розділяються між собою пробілом.
- ціле число
- Початкове значення кожного ідентифікатора. За умовчанням дорівнює 0.
Приклад
HTML5 CSS2.1 IE Cr Op Sa Fx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
counter-reset </title>
<style>
li {list-style-type: none; } /* Прибираємо вихідну нумерацію у списку */ ol {counter-reset: list1; } /* Почнемо лічильник */ ol li: before {counter-increment: list1; /* Збільшуємо значення лічильника */ content: counter (list1)". "; /* Виводимо число */ } ol ol {counter-reset: list2; } /* Почнемо лічильник вкладеного списку */ ol ol li: before {counter-increment: list2; /* Збільшуємо значення лічильника вкладеного списку */ content: counter (list1)"." counter (list2)". "; /* Виводимо число */ } </style>
</head>
<body>
<ol>
<li>
Пункт <ol>
<li>
Підпункт </li>
<li>
Підпункт </li>
<li>
Підпункт </li>
</ol>
</li>
<li>
Пункт <ol>
<li>
Підпункт </li>
<li>
Підпункт </li>
</ol>
</li>
</ol>
</body>
</html>
Результат даного прикладу показаний на рис. 1.
Примітка
Для елементів, у яких встановлено display : none, значення лічильника не змінюється.