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

Подскажите, пожалуйста, почему используется именно этот фрагмент текста.

.first + li,
.fourth + li {
background-color: red;
}

Задание решить не смог.

По логике вещей классами “first” и “fourth” отмечены первый и четвертый элементы в списке и при их выборе в CSS они будут закрашены красным, но, исходя из задания, нужно закрасить 2 и 5 элементы.

Объясните, пожалуйста.

Я не понял один момент.
Конкретно “.first + li,”.
Выбираем элемент класса first из списка ul. +li - что происходит с добавление этого элемента?
Можете пояснить, что произошло в этом фрагметне?

По условию задания вам необходимо выбрать второй и пятый элемент. Но у них нет собственных классов. Поэтому вы добираетесь к ним через соседей.
.first + li - выбирает один элемент, понимаете? Это как будто вы говорите браузеру: “Эй, браузер, найди-ка мне элемент с классом .first, но выбери не его, а следующего за ним соседа”.

15 лайков

Как все просто и понятно)
Спасибо большое!

1 лайк

Тоже не смогла сама пройти это задание. В объяснении не было сказано, что стиль применится в этом случае к следующему элементу, а тот, что перед ним и после него не затронет. Видимо это понимают сразу только те, у кого развито логическое мышление)) Но вот я после этого задания слегка приуныла…

1 лайк

Объясните еще, пожалуйста, зачем задан class=“target” у тега ul?

1 лайк

Это странный вопрос. А что не так с классом target?

.target тут чисто в служебных целях. Это блок для прямоугольника, в котором находятся мишени.

2 лайка

Спасибо)

Я все-равно не поняла это задание((( объясните пожалуйста еще ^^

Попробую объяснить я. Смотрите, что такое соседние селекторы? Это, грубо говоря, те, что стоят рядом. Соседи, так сказать. Далее, вспомните, что в CSS свойства правил можно применять как к тегам (без классов), например:
li {
font-size: 25px;
}
так и к классам, которые, само собой, без тегов не существуют и к ним относятся:
.first {
font-size: 25px;
}.
Для чего вообще нужны классы? А вот для чего: у вас необходимо задать свойства отдельным тегам li. Но ведь их 5! Для того, чтобы выделить прицельно какие-то, им назначен класс (таким образом, класс здесь выделяет из ВСЕХ тегов li ОТДЕЛЬНЫЕ, т.е. суживает круг li, к которым будут применены свойства.

Так, теперь по-другому объясню, что такое селектор. Селектор - это ВСЁ ТО, к чему необходимо применить какие-то свойства через CSS. Это могут быть теги, классы, их комбинация.

Теперь перейдём к заданию. Если мы напишем:
.first {
background-color: red;
}
и .fourth {
background-color: red;
}
мы закрасим в красный цвет, соответственно, первый и четвёртый кружки. Но! По условиям нам нужно закрасить 2 и 5-ю мишень! Конечно, если бы нам нужно было сделать ЗА пределами данной школы, мы бы не мучились, а присвоили классы 2-й и 5-й мишени и написали бы им необходимый цвет. Это было бы более удобно. Но в данном задании даётся понятие СОСЕДНИХ селекторов (т.е. соседних элементов, к которым нужно применить свойства). Мы в данном задании не можем изменить HTML, поэтому нужно выкручиваться по-другому. Для этого мы можем воспользоваться соседними селекторами. Кто является соседом (сверху!) нужным нам li? Правильно, li с классами .first и .fourth. И вот мы и прописываем в CSS: .first + li, .fourth + li. Браузер, когда увидит эти свойства, “пошерстит” и увидит, что свойство нужно применить НЕ к LI с классом .first, а спуститься вниз и, обнаружив непосредственно идущий за ним li, и применить к нему нужное свойство.

11 лайков

Ведь чтение кода браузером идёт ПОСЛЕДОВАТЕЛЬНО, СВЕРХУ ВНИЗ, поэтому поиск непосредственного СОСЕДА, к которому нужно применить “чары” CSS, идёт ВНИЗ, а не обратно. Вот поэтому в объяснении урока и говорится, что применение свойств идёт ТОЛЬКО в том случае, если браузер видит последовательность шествия селекторов СВЕРХУ ВНИЗ!

4 лайка

Алексей, спасибо большое! Разжевали и в рот положили!! Поняла! Всё)))))) Ура)))

На здоровье! :slight_smile:

4 лайка

Спасибо и от меня.

1 лайк

Спасибо вам!!!

1 лайк

Логическое мышление здесь ни при чем. В теории плохо написано. Надо уточнять, что стили будут применяться только к соседнему элементу, который справа и НЕ будут к тому, что слева. И все понятно. Но непонятно, зачем вообще нужен такой способ на практике?

2 лайка

Соседние селекторы часто используются для управления стилями и поведением label к текстовому полю input.
Запись input + label вы встретите в других курсах.

1 лайк

Сначала прочитал и вроде ОК. Но разве в данном случае нельзя просто использовать тег label?