counter-reset

Браузер	Internet Эксплорер				Нетscape		Опера				Safari			Файер фох
Версия	5.5	6.0	7.0	8.0	8.0	9.0	7.0	8.0	9.2	9.5	1.3	2.0	3.1	1.5	2.0	3.0
Поддерживается	Нет	Нет	Нет	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да

Краткая информация

CSS (ЦСС)	CSS (ЦСС)2
Значение по умолчанию	none
Наследуется	Нет
Применяется	Ко всем элементам
Аналог ШТМЛ	Нет
Ссылка на спецификацию	http://www.w3.org/TR/CSS21/generate.ШТМЛ#propdef-counter-reset

Описание

Устанавливает идентификатор, в котором будет храниться счетчик отображений определенного элемента, а также начальное значение счетчика. Такой счетчик может выводиться с помощью свойства content и псевдоэлементов after и before.

Синтаксис

counter-reset: none | [идентификатор] | [целое число]

Аргументы

none: Запрещает инициацию счетчика для текущего селектора.
идентификатор: Задает одну или несколько переменных, в которых будет храниться значение счетчика. Значения разделяются между собой пробелом.
целое число: Начальное значение каждого идентификатора. По умолчанию равно 0.

Пример

ШТМЛ 4.01CSS (ЦСС) 2.1IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!DOCTYPE ШТМЛ PUBLIC "-//W3C//DTD ШТМЛ 4.01//EN"  "http://www.w3.org/TR/ШТМЛ4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>counter-reset</title>
  <style type="text/CSS (ЦСС)">
   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.

Рис. 1

Рис. 1. Применение параметра counter-reset

Примечание

Для элементов, у которых установлено свойство display: none, значение счетчика не меняется.