counter-increment

Вы можете приобрести локальную версию справочника по CSS в формате CHM или HTML

Браузер	Internet Explorer				Netscape		Opera				Safari			Firefox
Версия	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	CSS2
Значение по умолчанию	none
Наследуется	Нет
Применяется	Ко всем элементам
Аналог HTML	Нет
Ссылка на спецификацию	http://www.w3.org/TR/CSS21/generate.html#propdef-counter-increment

Описание

Стилевой элемент counter-increment предназначен для увеличения значения счетчика приращений, который задается параметром counter-reset. Такой счетчик подсчитывает количество отображений элементов на странице и может выводиться с помощью свойства content и псевдоэлементов after и before. Это позволяет создавать списки (в том числе многоуровневые), в которых нумерация и вид задаются через стили.

Синтаксис

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

Аргументы

none: Запрещает увеличение счетчика для текущего селектора.
идентификатор: Задает одну или несколько переменных, для которых требуется изменить значение счетчика. Переменные разделяются между собой пробелом.
целое число: Определяет значение приращения счетчика. По умолчанию оно равно 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
LI { list-style-type: none; } OL { counter-reset: list; } LI:before { counter-increment: list 2; content: counter(list) ". "; }	Выводятся все четные числа. 2, 4, 6
LI { list-style-type: none; } OL { counter-reset: list -1; } LI:before { counter-increment: list list; content: counter(list) ". "; }	Выводятся все нечетные числа. 1, 3, 5
LI { list-style-type: none; } OL { counter-reset: list 9; } LI:before { counter-increment: list; content: counter(list) ". "; }	Список начинается с 10. 10, 11, 12

Пример

HTML 4.01CSS 2.1IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>counter-increment</title>
  <style type="text/css">
   BODY {
    counter-reset: heading; /* Инициируем счетчик */
   }
   H2:before {
    counter-increment: heading; /* Указываем идентификатор счетчика */
    content: "Глава " counter(heading) ". "; /* Выводим текст перед содержимым тега <H2> */
   }
  </style>
 </head>
 <body>
  <h2>Теория ловли льва в пустыне</h2>
  <h2>Методы инверсной кинематики</h2>
  <h2>Ловля льва численными методами</h2>
 </body>
</html>

Результат данного примера показан ни рис. 1.

Рис. 1

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

Примечание

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