Вы здесь: Главная » CSS » Вложенные списки

Вложенные списки

Вложенные списки вам наверняка встречались, и не раз. Само название говорит о том, что внутрь одного списка вложен другой, а может быть и несколько списков.

Есть всего одно правило построения таких списков - вкладывать элемент <ul> или <ol> нужно внутрь элемента <li> родительского списка.

Пример:

Если посмотреть на код этого примера внимательно, можно увидеть, что везде, где есть вложение нового списка, он появляется после текста внутри элемента <li>.
Вот, что получилось в результате:

  • List Item 1
  • List Item 2
    • List Item 2.1
    • List Item 2.2
      1. List item 2.3.1
      2. List item 2.3.2
      3. List item 2.3.3
    • List Item 2.3
    • List Item 2.4
  • List Item 3
  • List Item 4
  • List Item 5
    1. List Item 5.1
    2. List Item 5.2
    3. List Item 5.3
    4. List Item 5.4
  • List Item 6
  • List Item 7

Эта особенность хороша тем, что для описания стилей можно использовать контекстные селекторы - селекторы, в которых через пробел указывается несколько элементов или классов. CSS-свойства назначаются для того элемента, который идет самым последним, но с учетом его вложенности в другие элементы. Например, так можно отформатировать  сложный список.

Здесь используются правила, связанные с назначением маркеров для разных уровней списков:

  • для основного списка назначен маркер в виде звезды;
  • для вложенного маркерованного списка - в виде зеленой галочки;
  • для нумерованного списка, вложенного в предыдущий - в виде галочки в гербе;
  • для нумерованного списка, вложенного в основной, маркеры отключены, поэтому видны цифры.

Видео о форматировании вложенных списков

Вы можете скачать архив с файлами по ссылке и попробовать проделать все действия, описанные в видеуроке самостоятельно.

Свежие новости Фершампенуаз Челябинской области на сегодня

4 комментария

  1. А как сделать нумерованный список так, чтобы все номера списка верхнего уровня были в кружочках одного цвета, а вложенного списка - в кружочках другого цвета? Это разве с помощью маркеров делают?

  2. А будут еще какие-либо примеры на вложенные списки?
    А то не все до конца понятно.

  3. Замечательно. Просто и доступно. Жду продолжения статей.

  4. Спасибо за статью, нашла много чего интересного!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *