Читаем Спецификация 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

Функция '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'.