Селекторы, часть 1 / Дочерние селекторы [8/18]
×

Дочерние селекторы [8/18]

Потомком называются любые элементы, расположенные внутри родительского элемента. А дочерними элементами называются ближайшие потомки. Взгляните на пример:

<ul>
  <li><span>...</span></li>
  <li><span>...</span></li>
</ul>

По отношению к <ul> <li> являются дочерними элементами и потомками, а <span> — потомки, но не дочерние элементы.

Контекстные селекторы влияют на всех потомков, что не всегда удобно. Иногда необходимо задать стили только для дочерних элементов. Особенно это полезно при работе с многоуровневыми списками.

Для этого существует дочерний селектор, в котором используется символ >. Например: ul > li или ul > li > span.

В этом задании вы разберётесь, чем отличаются контекстные и дочерние селекторы.


Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Дочерние селекторы</title> <link rel="stylesheet" href="/assets/course7/course-3.css"> </head> <body> <h1>Сводка</h1> <ul class="places"> <li> <span>Устюгов</span> <ul> <li><span>0 штрафных</span></li> <li><span>0 запасных</span></li> </ul> </li> <li> <span>Черезов</span> <ul> <li><span>0 штрафных</span></li> <li><span>2 запасных</span></li> </ul> </li> <li> <span>Бьёрндален</span> <ul> <li><span>1 штрафной</span></li> <li><span>4 запасных</span></li> </ul> </li> </ul> </body> </html>
CSS
.places li { border-bottom: 2px solid #cccccc; } .places span { font-weight: bold; }
HTML Academy

Исправьте таблицу результатов:

  1. Нижние рамки должны остаться только у элементов списка первого уровня.
  2. Выделение жирным должно остаться только у фамилий.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.