Спецификация CSS2

Значение: [ ? ]+ | none | inherit

Начальное: none

Применяется: ко всем элементам

Наследуется: нет

Процентное: N/A

Носитель: все

Свойство 'counter-increment' принимает одно или более имён счётчиков (идентификаторы), за каждым из которых может следовать целое число. Это число обозначает, насколько счётчик увеличивается при каждом появлении элемента. Увеличение по умолчанию - 1. Допустимы 0 и негативные значения.

Свойство 'counter-reset также содержит список из одного или более имён счётчиков, за каждым из которых может следовать целое число. Целое число задаёт значение, в которое счётчик сбрасывается при каждом появлении элемента. По умолчанию - 0.

Если 'counter-increment' относится к счётчику, который не находится в области видимости (см. ниже) какого-либо 'counter-reset, то принимается, что счётчик установлен в 0 корневым элементом.

Здесь показан способ нумерации глав и разделов: "Chapter 1", "1.1", "1.2" и т.д.:

H1:before { content: "Chapter " counter(chapter) ". "; counter-increment: chapter; /* Добавляет 1 к главе */ counter-reset: section; /* Устанавливает раздел в 0 */ } H2:before { content: counter(chapter) "." counter(section) " "; counter-increment: section; }

Если элемент увеличивает/сбрасывает счётчик и использует его (в свойстве 'content' в псевдоэлементах :before или :after), то счётчик используется после того, как увеличен/сброшен.

Если элемент и увеличивает, и сбрасывает счётчик, то счётчик сначала сбрасывается, а затем увеличивается.

Свойство 'counter-reset следует правилам каскадирования. Таким образом, в соответствии с каскадированием, следующая таблица стилей:

H1 { counter-reset: section -1 } H1 { counter-reset: imagenum 99 }

сбросит только 'imagenum'. Чтобы сбросить оба счётчика, их нужно специфицировать вместе:

H1 { counter-reset: section -1 imagenum 99 }

Счётчики являются "самовкладывающимися", т.е. повторное использование счётчика в элементах-потомках автоматически создаёт новый объект счётчика. Это важно, например, для таких случаев, как списки в HTML, где элементы могут вкладываться внутри себя на произвольную глубину, и может оказаться невозможным определить уникально именованный счётчик для каждого уровня.

Так, следующего достаточно для нумерации вложенных элементов списка. Результат очень похож на применение установки 'display:list-item' и 'list-style: inside' в элементе LI:

OL { counter-reset: item } LI { display: block } LI:before { content: counter(item) ". "; counter-increment: item }

Самовложение базируется на том принципе, что каждый элемент, имеющий 'counter-reset для счётчика X, создаёт новый счётчик X, область видимости которого - элемент, его предшествующие родственники и все потомки элемента и его предшествующих родственников.

В предыдущем примере OL создаст счётчик, и все потомки OL будут ссылаться на этот счётчик.

Если мы обозначим с помощью item[n] nый экземпляр счётчика "item" и "(" и ")" - начало и конец области видимости, то следующий фрагмент HTML будет использовать указанные счётчики. (Мы используем ту же таблицу стилей, что и в предыдущем примере).

1. item
2. item
   1. item
   2. item
   3. item
      1. item
   4. item
3. item
4. item

1. item
2. item

Функция 'counters()' генерирует строку, составленную из значений всех счётчиков с тем же самым именем, разделённых заданной строкой.

Следующая таблица стилей нумерует вложенные элементы списка как "1", "1.1", "1.1.1" и т.д.

OL { counter-reset: item } LI { display: block } LI:before { content: counters(item, "."); counter-increment: item }

По умолчанию счётчики форматируются десятичными числами, а все стили, доступные для свойства 'list-style-type', доступны также для счётчиков. Обозначение будет такое:

counter(name)

для таблицы стилей по умолчанию, или:

counter(name, 'list-style-type')

Допустимы все стили, включая 'disc', 'circle', 'square' и 'none'.