Counter-increment

Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Нет Нет Да Да Да Да Да Да Нет Нет Да Да Да Да

 

CSS CSS2
Значение по умолчанию none
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML Нет

Описание

Стилевое свойство 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

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

Пример

<!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>

Примечание

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