Введение

Часто когда вы пишете текст вам нужно пронумеровать разделы и составить оглавление. Вы можете пронумеровать их непосредственно в коде, но это может быть трудоёмким, если вы будете в последствии редактировать этот текст то вам придётся изменять заново всю нумерацию. CSS2.1 дает вам автоматический способ нумерации использую CSS счётчики, и эта статья будет про то как их использовать. Есть только одно “но“: CSS счётчики не поддерживает Internet Explorer, но обещают поддержку в Internet Explorer 8.

Установка счётчика

Первым делом нужно обнулить счётчик и дать ему имя. Это можно сделать с помощью свойства counter-reset, например:

body { counter-reset: section; }

Эти действия обнулят счётчик к 0 на элементе body и присваивает ему имя section. Вы можете задать любое понравившееся вам имя. Это свойство также может иметь второе дополнительное значение, которое устанавливает начальное значение счётчика. Например если вы хотите чтобы нумерация начиналась с 5 то вы можете написать так:

body { counter-reset: section 4; }

Приращение счётчика

Следующим шагом будет установка когда счётчик увеличивается и каким значением. Это может определено свойством counter-increment. Если значение не установлено, то используется приращение счётчика по умолчанию.

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

Если вы хотите прирост счётчика по два, то:

h2 { counter-increment: section 2; }

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

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

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

После того как счётчик установлен, нужно вывести его на страницу. Вывод осуществляется с помощью свойств content, counter, и псевдокласса :before

body {counter-reset: section 4;}
h2 {counter-increment: section;}
h2:before { counter(section) ". ";}

пример

Использование двух и более счётчиков.

Можно использовать больше одного счётчика. В следующем примере будет показано как использовать два счётчика, чтобы установить нумерацию для разделов и подразделов. В каждом разделе счётчик подраздела будет сбрасываться.

body { counter-reset: section; }
h2 {
    counter-increment: section;
    counter-reset: sub-section;
}
h2:before,
h3:before { content: counter(section) "." counter(sub-section) " "; }
h3 { counter-increment: sub-section; }

пример

Вложенные счётчики.

Кроме того как определять счётчики для каждого раздела/подраздела есть так же функция counters() для создания вложенных счётчиков. Это прекрасно работает для элементов типа список, где списки могут быть вложены друг в друга.Это не работало бы в примерах выше, потому что там подразделы не были вложены в разделы.

Вложенные счётчики могут быть установлены так:

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 и т.д. Второй вложенный список начнётся с 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 можно использовать значения из свойства list-style-type. Например:

h2:before { content: counter(section, upper-alpha) ". "; }

пример

Эта статья является вольным переводом статьи: Automatic numbering with CSS Counters