Подскажите, пожалуйста, почему используется именно этот фрагмент текста.
.first + li,
.fourth + li {
background-color: red;
}
Задание решить не смог.
По логике вещей классами “first” и “fourth” отмечены первый и четвертый элементы в списке и при их выборе в CSS они будут закрашены красным, но, исходя из задания, нужно закрасить 2 и 5 элементы.
Объясните, пожалуйста.
Я не понял один момент.
Конкретно “.first + li,”.
Выбираем элемент класса first из списка ul. +li - что происходит с добавление этого элемента?
Можете пояснить, что произошло в этом фрагметне?
По условию задания вам необходимо выбрать второй и пятый элемент. Но у них нет собственных классов. Поэтому вы добираетесь к ним через соседей.
.first + li - выбирает один элемент, понимаете? Это как будто вы говорите браузеру: “Эй, браузер, найди-ка мне элемент с классом .first, но выбери не его, а следующего за ним соседа”.
Как все просто и понятно)
Спасибо большое!
Тоже не смогла сама пройти это задание. В объяснении не было сказано, что стиль применится в этом случае к следующему элементу, а тот, что перед ним и после него не затронет. Видимо это понимают сразу только те, у кого развито логическое мышление)) Но вот я после этого задания слегка приуныла…
Объясните еще, пожалуйста, зачем задан class=“target” у тега ul?
Это странный вопрос. А что не так с классом target?
.target тут чисто в служебных целях. Это блок для прямоугольника, в котором находятся мишени.
Спасибо)
Я все-равно не поняла это задание((( объясните пожалуйста еще ^^
Попробую объяснить я. Смотрите, что такое соседние селекторы? Это, грубо говоря, те, что стоят рядом. Соседи, так сказать. Далее, вспомните, что в 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, и применить к нему нужное свойство.
Ведь чтение кода браузером идёт ПОСЛЕДОВАТЕЛЬНО, СВЕРХУ ВНИЗ, поэтому поиск непосредственного СОСЕДА, к которому нужно применить “чары” CSS, идёт ВНИЗ, а не обратно. Вот поэтому в объяснении урока и говорится, что применение свойств идёт ТОЛЬКО в том случае, если браузер видит последовательность шествия селекторов СВЕРХУ ВНИЗ!
Алексей, спасибо большое! Разжевали и в рот положили!! Поняла! Всё)))))) Ура)))
На здоровье! 
Спасибо и от меня.
Спасибо вам!!!
Логическое мышление здесь ни при чем. В теории плохо написано. Надо уточнять, что стили будут применяться только к соседнему элементу, который справа и НЕ будут к тому, что слева. И все понятно. Но непонятно, зачем вообще нужен такой способ на практике?
Соседние селекторы часто используются для управления стилями и поведением label к текстовому полю input.
Запись input + label вы встретите в других курсах.
Сначала прочитал и вроде ОК. Но разве в данном случае нельзя просто использовать тег label?
