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

Соседние селекторы [6/18]

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

Например, теги <li> в списке являются соседними по отношению друг к другу и вложенными в тег <ul>.

Соседние селекторы записываются с помощью знака +, например, селектор1 + селектор2. Стили применятся к элементу, подходящему под селектор2, только если сразу перед ним расположен элемент, подходящий под селектор1.

Пример. Есть два элемента списка:

<li class="hit"></li>
<li class="miss"></li>

Селектор .hit + .miss применит стили к элементу с классом miss, так как перед ним есть элемент с классом hit.

Селектор .hit + li тоже применит стили к элементу с классом miss, а селектор .miss + .hit не сработает.

Хотите верстать адаптивно, использовать БЭМ и LESS? Тогда записывайтесь на наш продвинутый интенсив.

Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Соседние селекторы</title> <link rel="stylesheet" href="/assets/course7/course-1.css"> </head> <body> <ul class="target"> <li class="first">1</li> <li>2</li> <li>3</li> <li class="fourth">4</li> <li>5</li> </ul> </body> </html>
CSS
HTML Academy

И снова лидер меняется.

  1. Биатлонист закрыл все мишени, кроме второй и пятой.

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

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

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

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

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