Автоматическая нумерация строк через CSS

Первым делом необходимо обнулить счетчик и дать ему название, используя свойство counter-reset:

body { counter-reset: section; }

Таким образом, для элемента body счетчик имеет значение 0, а название счетчика – section. Название может быть любым, какое вы пожелаете. Свойство counter-reset может иметь также еще одно дополнительное значение, обозначающее, с какого числа начнется нумерация.
Например, если хотите, чтобы нумерация начиналась с 5, то необходимо прописать следующее:

body { counter-reset: section 4; }

Цифру 4 пишем потому, что счетчик всегда начинается с цифры на единицу больше установленной.

Следующий шаг – определение элемента, который будет нумероваться. Для этого используется свойство counter-increment:

body { counter-reset: section 4; }

h2 { counter-increment: section; }

Дополнительно, можно установить значение, на которое будет увеличиваться счетчик, например:

h2 { counter-increment: section 2; }

Т.е. счетчик будет каждый раз увеличиваться не на 1, а на 2. (Пример: 5, 7, 9, 11 …)

Свойство также может принимать отрицательные значения и 0. Если счетчик устанавливается и инкриминируется (растет) в одном и том же элементе, тогда его значение будет постоянно сбрасываться. В следующем примере значение счетчика всегда будет равно 2м:

h2 {
    counter-reset: section;
    counter-increment: section;
}

Отображение счетчика

Как только все необходимые параметры для счетчика установлены, необходимо прописать правила для его отображения. Это можно сделать с помощью функции counter() и псевдо-класса before:

body { counter-reset: section 4; }

h2 { counter-increment: section; }

h2:before{ counter(section) " "; }

Если используете один и тот же элемент ( как было в примере выше), тогда счетчик увеличится до момента отображения.

Сложная нумерация (2 счетчика и более)

Функция counter() может быть использована более 1 раза. В следующем примере я использую 2 счетчика для нумерации разделов и подразделов.

Счетчик для подразделов обнуляется для каждого нового раздела:

body { counter-reset: section; }

h2 {
    counter-increment: section;
    counter-reset: sub-section;
}

h2:before h3:before{ content: counter(section) “.“ counter(sub-section) “ “; }

h3:before{
    counter-increment: sub-section;
}

Использование вложенных счетчиков

Существует также функция counters() для вложенных счетчиков. Это хорошо подходит для работы с элементами списков (ol), где каждый список может иметь многоуровневую структуру. Но данный способ не будет работать для примера выше, .т.к. подразделы не вложены в элемент раздела.

Для вложенных счетчиков можно прописать следующие правила:

ol {
    counter-reset: section;
    list-style-type: none;
   }

ol li { counter-increment: section; }

ol li:before{ content: counters(section, ".") ". "; }

Данный код будет увеличивать счетчик для каждого элемента списка, и не имеет значения насколько сложна структура списка. Но очень важно, чтобы счетчик сбрасывался в нужном месте, т.е. в начале каждого нового вложенного элемента. В примере необходимо обнулять счетчик на каждом вложенном элементе ol.

В примере первый вложенный список начинается с пункта 1.1, затем 1.2, 1.3 и так далее. Вложенный список третьего уровня начинается с t 1.1.1 и далее идут 1.1.2, 1.1.3 и т.д.

<ol>
<li>item 1
<ol>
<li>sub item 1
<ol>
<li>sub-sub item 1</li>
<li>sub-sub item 2</li>
<li>sub-sub item 3</li>
</ol>
</li>
<li>Sub item 2</li>
</ol>
</li>
<li>item 2</li>
</ol>

Стилизация счетчика

Существует возможность задать стиль маркера для счетчика, передавая второй параметр в функциях counter() и counters(). Значения передаются те же, что и для свойства list-style-type. Хотя все они валидны, для счетчика имеет значение передавать только подмножества, а такие значения как disc, square и circle не изменятся, независимо от сложности структуры счетчика. Например, можно задать следующий стиль:

ol li:before{ counter(answer, lower-alpha) “) “; }

Использование счетчиков для замены начального значения нумерованного списка

Если необходимо установить начальное значение для элемента ol, отличное от 1 и вы используете “strict” доктайп, то в процессе валидации, получите предупреждение о том, что такой код не валиден. Существуют доводы относительно того, является ли начальное значение настолько показательным, кроме того в текущей спецификации HTML5 о нем не заявлено . Даже если стартовое значение будет разрешено в HTML5, это не поможет в случае, когда страница имеет доктайп HTML4. Если необходимо, чтобы страница была валидна, используйте transitional доктайп или CSS counters.

Например, если нужно, чтобы счетчик начинался не с 1 по умолчанию, а с 4х, то используйте следующий код:

body { counter-reset: list-order 3; }

ol li {
    counter-increment: list-order;
    list-style-type: none;
}

ol li:before{ content: counter(list-order) “ “; }

Важно также убрать маркеры, чтобы избежать двойной нумерации.

Авторский текст см www.getincss.ru

ПРИМЕРЫ

архив javascript + CSS :: • до 2005 • 2006 • 2007 • 2008 • 2009 • 2010 • 2011