Генерируемое содержимое, автоматическая нумерация и списки

Видимость: свойство 'visibility'

Автоматическая нумерация в CSS2 контролируется двумя свойствами, 'counter-increment' и 'counter-reset. Счётчики, определённые в этих свойствах, используются с функциями counter() и counters() свойства 'content'.

'counter-reset

Значение: [ <identifier> <integer>? ]+ | none | inherit

Начальное: none

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

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

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

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

'counter-increment'

Значение: [ <identifier> <integer>? ]+ | 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 будет использовать указанные счётчики. (Мы используем ту же таблицу стилей, что и в предыдущем примере).

<OL>               <!-- (set item[0] to 0          -->
  <LI>item         <!--  increment item[0] (= 1)   -->
  <LI>item         <!--  increment item[0] (= 2)   -->
    <OL>           <!--  (set item[1] to 0         -->
      <LI>item     <!--   increment item[1] (= 1)  -->
      <LI>item     <!--   increment item[1] (= 2)  -->
      <LI>item     <!--   increment item[1] (= 3)  -->
        <OL>       <!--   (set item[2] to 0        -->
          <LI>item <!--    increment item[2] (= 1) -->
        </OL>      <!--   )                        -->
        <OL>       <!--   (set item[3] to 0        -->
          <LI>     <!--    increment item[3] (= 1) -->
        </OL>      <!--   )                        -->
      <LI>item     <!--   increment item[1] (= 4)  -->
    </OL>          <!--  )                         -->
  <LI>item         <!--  increment item[0] (= 3)   -->
  <LI>item         <!--  increment item[0] (= 4)   -->
</OL>              <!-- )                          -->
<OL>               <!-- (reset item[4] to 0        -->
  <LI>item         <!--  increment item[4] (= 1)   -->
  <LI>item         <!--  increment item[4] (= 2)   -->
</OL>              <!-- )                          -->

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

H1:before        { content: counter(chno, upper-latin) ". " }
H2:before        { content: counter(section, upper-roman) " - " }
BLOCKQUOTE:after { content: " [" counter(bq, hebrew) "]" }
DIV.note:before  { content: counter(notecntr, disc) " " }
P:before         { content: counter(p, none) }

Счётчики в элементах с 'display: none'

Элемент, который не отображается ('display' установлено в 'none'), не может установить или сбросить счётчик.

С помощью следующей таблицы стилей элементы H2 с классом "secret" не увеличивают 'count2'.

H2.secret {counter-increment: count2; display: none}

В то же время, элементы с 'visibility', установленной в 'hidden', увеличивают счётчики.