Списки активно используются для автоматической нумерации блоков контента. Однако при использовании вложенных списков нельзя получить нумерацию подпунктов типа 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. Вид вложенного списка
Теперь уберем встроенную нумерацию списков и создадим ее по новой, но уже в том виде, что нам требуется. Для этого понадобится три стилевых атрибута: 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; } /* Р