Вложенные списки с автоматической нумерацией
Списки активно используются для автоматической нумерации блоков контента. Однако при использовании вложенных списков нельзя получить нумерацию подпунктов типа 1.1, 1.2, 1.3, поскольку каждый список будет независимым. Но то, что нельзя в ШТМЛ, можно возложить на стили.
Для начала просмотрим, как вообще создавать вложенные списки. В качестве основного контейнера выступает тег <OL>, а элементы списка формируются тегами <LI>. Вложенный список также начинается с <OL>, но этот тег должен располагаться внутри контейнера <LI>, именно так соблюдается корректность синтаксиса (пример 1).
Пример 1. Обычный вложенный список
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/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 HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/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; } /* Инициируем счетчик */
OL LI:before {
counter-increment: list1; /* Увеличиваем значение счетчика */
content: counter(list1) ". "; /* Выводим значение */
}
OL OL { counter-reset: list2; } /* Инициируем счетчик вложенного списка */
OL OL LI:before {
counter-increment: list2; /* Увеличиваем значение счетчика */
content: counter(list1) "." counter(list2) ". "; /* Выводим значение типа 2.1, 2.2,... */
}
</style>
</head>
<body>
<ol>
<li>Пункт
<ol>
<li>Подпункт</li>
<li>Подпункт</li>
<li>Подпункт</li>
</ol>
</li>
<li>Пункт
<ol>
<li>Подпункт</li>
<li>Подпункт</li>
</ol>
</li>
</ol>
</body>
</html>
Результат данного примера показан на рис. 2.
Рис. 2. Вид автонумерации списка в браузере Опера
Замечание
Приведенный пример не работает в браузере Internet Эксплорер до 7 версии включительно, поскольку он не поддерживает ни одно из приведенных стилевых свойств.
Поскольку браузер Internet Эксплорер не поддерживает множество интересных стилевых атрибутов, специально для него обычную нумерацию в списках следует оставить нетронутой. Для этого дастаткова убрать list-style-type: none. Но это также затронет и другие браузеры, в которых пример работает корректно, поэтому придется применить хаком — так имеется ввиду прием, когда разным браузерам дается разный стилевой код. Например, можно применить тегом !important. При добавлении !important к значению стилевого атрибута его важность повышается. Если заново определить значение того же атрибута без !important, он будет игнорироваться браузерами. Но только не в Intenet Explorer версии 6 и ниже.
LI {
list-style-type: none !important; /* Убираем нумерацию в браузерах Опера, Safari, Файер фох */
list-style-type: decimal; /* Оставляем нумерацию в браузере ИЕ6 и ниже */
}
Заменяя этим кoдам строку с селектором LI в примере 2 получим вложенный список корректно работающий во всех браузерах.
| Статья опубликована: 04.09.2009 | Последнее обновление: 04.09.2009 |