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

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

Есть всего одно правило построения таких списков - вкладывать элемент <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-свойства назначаются для того элемента, который идет самым последним, но с учетом его вложенности в другие элементы. Например, так можно отформатировать  сложный список.

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

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

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

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