• 46787
  • 493
  • 26
Нравится блог?
Подписывайтесь!

Автоматическая нумерация с помощью CSS счетчиков

Введение

Часто когда вы пишете текст вам нужно пронумеровать разделы и составить оглавление. Вы можете пронумеровать их непосредственно в коде, но это может быть трудоёмким, если вы будете в последствии редактировать этот текст то вам придётся изменять заново всю нумерацию. 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.

  1. item 1
    1. sub item 1
      1. sub-sub item 1
      2. sub-sub item 2
      3. sub-sub item 3
    2. Sub item 2
  2. item 2

Смотрите пример

.

Стилизация счётчиков.

Так же во всех случаях вторым аргументом counter можно использовать значения из свойства list-style-type. Например:

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

Смотрите пример.

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

Вы также можете почитать эту и другие статьи на моем блоге

30 октября 2008, 8:14
939

Загрузка...

Комментарии

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

А CSS Level 3 это гигантский фейл. Еще чуть-чуть, и он превратится в новый язык программирования, defeating the purpose...
rOOse
0
0
А если мне нужны дивы? Вот заказчик скажет разбейся но не списком а дивами сверстай))) Кстати это не левел 3, а 2.1
Вот пример верстки, так на быструю руку накиданный: Example
А вложить div в li разве нельзя? :)

>Кстати это не левел 3, а 2.1
Угу, точно. Я просто не осилил спеку дальше CSS Box Model. =)
rOOse
0
0
>А вложить div в li разве нельзя? :)

Мдяя... двойка мне))) я почему-то думал что в li нельзя div)))
Ну, а если мне цифры нужны в конце, а не в начале?
>Ну, а если мне цифры нужны в конце, а не в начале?
Как это? Это чтобы поместить цифры справа от текста?

За такую типографику тебя повесят дизигнеры. :D
))) Да нет, ты пример смотрел который в комментариях? вот там цифры отдельно же.
Да, поглядел примерчик.

Наверное, можно сделать с помощью вложенных div + (не)много магии позиционирования CSS. :) (задать padding элементов, или еще там что)
Ага можно и так)))
Приятно поговорить с человеком который в теме)))
spawn
0
0
угу уже зачитал на девопере. практическая ценность низкая, ибо 6 осел.
helgi
0
0
Использовать это, конечно, можно, но, увы, только когда без номеров будет graceful degradation, а не потеря функциональности.
rOOse
0
0
Да осел это беда, но надо уже исключать 6 IE из списка поддерживаемых браузеров)))
spawn
0
0
сам об этом мечтаю но думаю что не раньше чем через год это чудо произойдет =)

Оставьте свой комментарий

Спасибо за открытие блога в Yvision.kz! Чтобы убедиться в отсутствии спама, все комментарии новых пользователей проходят премодерацию. Соблюдение правил нашей блог-платформы ускорит ваш переход в категорию надежных пользователей, не нуждающихся в премодерации. Обязательно прочтите наши правила по указанной ссылке: Правила

Также можно нажать Ctrl+Enter

Популярные посты

Я был удивлён, что в Азербайджане есть Казахский район

Я был удивлён, что в Азербайджане есть Казахский район

Мне как казаху по национальности очень хотелось туда попасть. Оказалось, что климат там намного суровей и люди, говорят, суровые и воинственные. Казах – город на западе Азербайджана...
alidimash
18 янв. 2017 / 21:50
  • 26827
  • 18
10 лучших районов Алматы. Широкие улочки, частные дома, летом – красота!

10 лучших районов Алматы. Широкие улочки, частные дома, летом – красота!

Названия улиц: Садовый бульвар, Солнечный проезд. Красиво звучит не так ли? Прям, как в Москве... Уютные улочки и радующие глаз одноэтажные домики, тихо и свободно, нет динамики, движух и ажиотажа.
gelberdeuet
16 янв. 2017 / 14:45
  • 8057
  • 98
Многочасовые очереди, смерти в ЦОНах: почему вопросы об этом ставят парламентариев в тупик?

Многочасовые очереди, смерти в ЦОНах: почему вопросы об этом ставят парламентариев в тупик?

Ожидали ли депутаты Мажилиса всего этого? Как планировали этот процесс регистрации, и обсуждали ли его, прежде чем одним нажатием кнопки принять нормы с такими абсурдными временными рамками?
openqazaqstan
17 янв. 2017 / 14:32
  • 4863
  • 22
Сильное ДТП произошло в Алматы на Тимирязева-Байзакова

Сильное ДТП произошло в Алматы на Тимирязева-Байзакова

NoComment (c) Официальный слоган EuroNews. Катастрофа на алматинской утренней трассе началась с того, что водители «Ниссана» и микровена ожидали сигнала светофора на запад по Тимирязева...
ibestreporter
17 янв. 2017 / 22:52
  • 3702
  • 5
Астана глазами алматинских девушек. Как при таких погодных условиях можно выжить?

Астана глазами алматинских девушек. Как при таких погодных условиях можно выжить?

В спальных районах, и в высотных домах сквозь стены слышно завывание ветра. В особенности ночью. Такие звуки, я слышала, пожалуй, только по телевизору, в фильмах про метель.
Naomi_K
вчера / 12:36
Вейпинг безопасен? Эндрю Холл из США тоже так считал, пока что-то не пошло не так

Вейпинг безопасен? Эндрю Холл из США тоже так считал, пока что-то не пошло не так

Эндрю Холл из США считал, что вейпинг безопасен и усиленно убеждал в этом близких. Но как-то раз что-то пошло не так. Это результат взрыва хипстерского устройства - выбило 7 зубов + ожоги и раны...
Maxambet
17 янв. 2017 / 16:28
  • 3583
  • 47
Это поколение просрет страну. 20-летняя молодежь представляет из себя сказочных эльфов

Это поколение просрет страну. 20-летняя молодежь представляет из себя сказочных эльфов

Смотря в очередные пустые глаза вчерашнего студента, приходящего устраиваться на первую работу страшно становится. Потому что сравниваю с теми же китайскими студентами, которые готовы выгрызать себе мечту.
mbaitykov
18 янв. 2017 / 11:34
  • 3681
  • 98
Становится хуже, но как-то постепенно. Беднеем, но тоже как-то не разом

Становится хуже, но как-то постепенно. Беднеем, но тоже как-то не разом

Помню, когда я уезжал и Казахстана, тут было довольно прилично, даже не смотря на то, что жить было невыносимо. Но прилично так. Мусора было меньше. Дороги чистили, вони почти не было. Да и в остальном тоже норм.
shootnix
18 янв. 2017 / 12:49
  • 3166
  • 34
Любимый Тайланд. Правящий король называет Паттайю «черным пятном на репутации страны»

Любимый Тайланд. Правящий король называет Паттайю «черным пятном на репутации страны»

Тайланд мы впервые посетили в декабре 2012 года. Полученные эмоции настолько были яркими, что в конце 2015 года мы решили еще разок слетать в Тайланд. Вспоминая Тай, первое о чем я думаю - горячий...
zhainar_d
17 янв. 2017 / 11:11
  • 2988
  • 24