Контекстные селекторы [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

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

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

Теория Проверить Следующее задание

Идёт запись на курс HTML и CSS, уровень 1 #22, который стартует 6 августа.

Курсы

Интенсивы

Информация

Остальное