Вложенные списки с автоматической нумерацией

www-html.ru

Обычная версия

Списки активно используются для автоматической нумерации блоков контента. Однако при использовании вложенных списков нельзя получить нумерацию подпунктов типа 1.1, 1.2, 1.3, поскольку каждый список будет независимым. Но то, что нельзя в ШТМЛ, можно возложить на стили.

Для начала просмотрим, как вообще создавать вложенные СЃРїРёСЃРєРё. Р’ качестве РѕСЃРЅРѕРІРЅРѕРіРѕ контейнера выступает тег <OL>, Р° элементы СЃРїРёСЃРєР° формируются тегами <LI>. Вложенный СЃРїРёСЃРѕРє также начинается СЃ <OL>, РЅРѕ этот тег должен располагаться внутри контейнера <LI>, именно так соблюдается корректность синтаксиса (пример 1).

Пример 1. Обычный вложенный список

<!DOCTYPE РЁРўРњР› PUBLIC "-//W3C//DTD РЁРўРњР› 4.01//EN" "http://www.w3.org/TR/РЁРўРњР›4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Вложенный список</title>
</head>
<body>
<ol>
<li>РџСѓРЅРєС‚ 1
<ol>
<li>РџРѕРґРїСѓРЅРєС‚ 1.1</li>
<li>РџРѕРґРїСѓРЅРєС‚ 1.2</li>
<li>РџРѕРґРїСѓРЅРєС‚ 1.3</li>
</ol>
</li>
<li>РџСѓРЅРєС‚ 2
<ol>
<li>РџРѕРґРїСѓРЅРєС‚ 2.1</li>
<li>РџРѕРґРїСѓРЅРєС‚ 2.2</li>
</ol>
</li>
</ol>
</body>
</html>

Результат данного примера показан РЅР° СЂРёСЃ. 1. Обратите внимание, что нумерация вложенных СЃРїРёСЃРєРѕРІ начинается каждый раз заново.

Р РёСЃ. 1

Рис. 1. Вид вложенного списка

Теперь уберем встроенную нумерацию списков и создадим ее по новой, но уже в том виде, что нам требуется. Для этого понадобится три стилевых атрибута: counter-reset, counter-increment и content.

counter-reset — задает некоторую переменную, которая будет хранить значение счетчика;

counter-increment — увеличивает или уменьшает значение счетчика РЅР° указанное число;

content — выводит значение счетчика РїСЂРё использовании аргумента counter(переменная). Работает совместно СЃ псевдоэлементами after или before.

Для СЃРїРёСЃРєР° первого СѓСЂРѕРІРЅСЏ переменную счетчика назовем list1, Р° для второго СѓСЂРѕРІРЅСЏ — list2. РўРѕРіРґР° инициация счетчиков для СЃРїРёСЃРєРѕРІ будет следующей.

OL { counter-reset: list1; } /* Список первого уровня */
OL OL { counter-reset: list2; } /* Список второго уровня*/

Р’ данном случае отделить вложенный СЃРїРёСЃРѕРє РѕС‚ внешнего помогают конконтентные селекторы. Конструкция OL OL РѕР·РЅР°С‡Р°РµС‚ применять стиль только Рє тегу <OL>, РЅРѕ только РєРѕРіРґР° РѕРЅ располагается внутри РґСЂСѓРіРѕРіРѕ тега <OL>.

Увеличение значения счетчика РїСЂРѕРёСЃС…РѕРґРёС‚ через селектор OL LI:before, Рє которому добавляются стилевые атрибуты counter-increment Рё content. Атрибут counter-increment СЃРѕ значением list1 повышает значение этого счетчика РЅР° единицу, Р° content: counter(list1) ". " выводит значение счетчика перед пунктом СЃРїРёСЃРєР°. Эти атрибуты работают РІ паре, поэтому включать РёС… надо одновременно.

OL LI:before { /* Список первого уровня */
 counter-increment: list1; /* Увеличиваем значение счетчика */
 content: counter(list1) ". "; /* Выводим значение РІ РІРёРґРµ 1., 2.*/
}
OL OL LI:before { /* Список второго уровня */
 counter-increment: list2; /* Увеличиваем значение счетчика */
 content: counter(list1) "." counter(list2) ". "; /* Выводим значение типа 2.1, 2.2,... */
}

Для вложенного СЃРїРёСЃРєР° РІРЅРѕРІСЊ применяем конконтентные селекторы (OL OL) Рё одновременно используем вывод счетчика list1 Рё list2, РІ этом случае РјС‹ Рё получим нумерацию нужного нам РІРёРґР°.

Окончательный РєРѕРґ приведен РІ примере 2.

Пример 2. Вложенные списки с автонумерацией

<!DOCTYPE РЁРўРњР› PUBLIC "-//W3C//DTD РЁРўРњР› 4.01//EN" "http://www.w3.org/TR/РЁРўРњР›4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Вложенный список</title>
<style type="text/CSS (ЦСС)">
LI { list-style-type: none; } /* Убираем исходную нумерацию */
OL { counter-reset: list1; } /* Р