counter-increment

Internet Explorer

Google Chrome

Opera

Safari

Firefox

6.07.08.0 2.03.04.0 9.29.610 2.03.14.0 2.03.03.6
                   
CSS 1CSS 2CSS 2.1CSS 3
    

Описание CSS свойства:

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

Краткая информация:
Значение по умолчанию: none
Наследуется:Нет
Применяется: Ко всем элементам
Ссылка на спецификацию: http://www.w3.org/TR/CSS21/generate.html#propdef-counter-increment

Синтаксис CSS свойства:

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

Значения CSS свойства:

none - Запрещает увеличение счетчика для текущего селектора.

inherit - Наследует значение родителя.

идентификатор - Задает одну или несколько переменных, для которых требуется изменить значение счетчика. Переменные разделяются между собой пробелом.

целое число - Определяет значение приращения счетчика. По умолчанию оно равно 1. Допускается использовать отрицательные и нулевые значения.

Возможные сочетания значений свойств counter-reset и counter-increment показаны в таблице ниже:


Код Результат
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

Особое примечание:

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


Баннер SGU.RU