Работа со списками, нумерация списка, элемент list

Сегодня рассмотрим списки. Будем использовать встроенный в CSS функционал для работы со списками: counter и counters. А также зададим сложную нумерацию для элементов списка.

Допустим, у нас есть html документ такого содержания:

<div class="list">
   <span>Глава 
 первая</span>
   <span>Глава вторая</span>
   <span>Глава третья</span>
</div>

Рассмотрим основные правила построения списков (элемент list) в CSS. По сути, списочные структуры можно создавать из чего угодно. Теперь в файле со стилями опишем стиль для list:

• Если для элементов «span» указать представление list-item, то они превратятся в элементы списка:

.list span{
   display:list-item}

Тут же элементы становятся блочными, и к ним пририсовывается маркер. Только маркер невидим.

• .list {padding-left:40px;} — делаем маркеры видимыми, т.е. освобождаем под них пространство.
• .list{direction:rtl;} — аналог правила dir, направление справа-налево.
• .list{unicode-bidi:bidi-override;} — переписать направление текста в соответствии с предыдущим правилом direction, т.е. текст встанет справа-налево. Это правило может быть полезно для языков с написанием справа-налево.
• .list{list-style-type:decimal} — разные типы нумерации списка, например, цифры.

Сложная нумерация списков

Иногда нужно нумеровать элементы списка как: 1.2.4, 1.1.1.127 и т.п. Для этого используют сложную нумерацию. Рассмотрим на примерах.

Есть html документ такого вида:

<div id="ul">
   <div>Глава
      <span>Раздел</span>
      <span>Раздел</span>
   </div>
   <div>Глава
      <span>Раздел</span>
      <span>Раздел</span>
      <span>Раздел</span>
   </div>
</div>

Тогда в файле со стилями пишем следующий код:

• #ul{counter-reset:d1;} — сбрасываем счетчие d1 в нулевое состояние.
• #ul div:before{content:counter (d1, upper-roman) ‘.’; counter-increment:d1; } — здесь используем псевдоэлемент before. Записываем какой-то контент с помощью функционала counter: указываем счетчик d1, потом тип нумерации (по умолчанию стоит decimal), потом к строке прибавляем точку (в итоге выходит цифра с точкой). В конце увеличиваем счетчик (по умолчанию на 1, можно поставить другое значение).
• #ul div:before{counter-reset:d2;} — сбрасываем счетчик d2, который будем использовать в элементах «span».
• #ul span:before{content:counter (d1, upper-roman) ‘.’ counter (d2, lower-alpha) ‘. ‘; counter-increment:d2; — здесь создаем сборный счетчик, как в предыдущих правилах, т.е. по сути здесь два счетчика.

Пример другого типа нумерации с использованием нумерованных списков «ol»:

ol{
  counter-reset:w;
  list-style:none;}
ol li:before{
   content:counters(w, '.', decomal) '. ';
   counter-increment:1;}

Функционал counters позволяет все счетчики записывать друг за другом, причем разделитель между ними — это точка (.) Далее увеличиваем счетчик на 1.

Вот два функционала — counter и counters, которые позволяют делать нумерацию абсолютно любого уровня сложности. Теперь не надо вручную проставлять все эти значения.

---