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

Контекстные селекторы [5/18]

Селектор может состоять из нескольких частей, разделённых пробелом, например:

p strong { ... }
ul .hit { ... }
.footer .menu a { ... }

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

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

Читать их проще всего справа налево:

/* выбрать все теги strong внутри тегов p */
p strong { ... }

/* выбрать все элементы с классом .hit внутри тегов ul */
ul .hit { ... }

/* выбрать все ссылки внутри элементов с классом .menu,
   которые лежат внутри элементов с классом .footer */
.footer .menu a { ... }

Таким образом, можно задавать элементам различные стили в зависимости от их контекста. Если ссылка расположена внутри меню, сделать её крупнее, а если внутри основного текста, то задать ей нужный цвет.

В этом задании вы потренируетесь использовать контекстные селекторы.


Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Контекстные селекторы</title> <link rel="stylesheet" href="/assets/course7/course-2.css"> </head> <body> <div class="shooter-1"> <ul class="target"> <li class="first">1</li> <li class="second">2</li> <li class="third">3</li> <li class="fourth">4</li> <li class="fifth">5</li> </ul> </div> <div class="shooter-2"> <ul class="target"> <li class="first">1</li> <li class="second">2</li> <li class="third">3</li> <li class="fourth">4</li> <li class="fifth">5</li> </ul> </div> </body> </html>
CSS
/* Небольшая подсказка .shooter-1 .first { background-color: white; } */
HTML Academy

На огневом рубеже дуэль.

  1. Первый биатлонист закрыл все мишени, кроме второй и пятой.
  2. А второй промахнулся по первой, но затем отстрелялся чисто.

    Образец попадания по мишеням
Теория Проверить Следующее задание
Идёт запись на курс Продвинутый HTML и CSS #10, который стартует 27 февраля.

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

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

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

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