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


Ваш комментарий

Ваш адрес email не будет опубликован.

Для отправки комментария, поставьте отметку, что разрешаете сбор и обработку ваших персональных данных . Политика конфиденциальности