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

Курсы §8. Селекторы
1

Очень интересное задание. Прочитал в комментариях что можно решить несколькими способами.
Я сделал вот так

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

Или можно было как-то проще, правильнее?

1 лайк
2

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

А так, конечно, можно избавиться от классов, используя nth-child.

1 лайк
3

Пытался понять это задание и не очень получилось. Можно поподробнее? До этого никакие задания не вызывали сложностей.

4

Я так решил :slight_smile:

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

Есть вопрос:
В задании требуется закрыть вторую и пятую мишень. В html прописаны классы для первой и четвертой .
Вопрос: объясните мне почему код для первой и четвертой по итогу закрывает вторую и пятую?
Или я что-то упускаю?

6

Не путайте, пожалуйста. Да, классы написаны для первой и четвертой мишени. Но селектор .first + li и .fourth + li выбирают вторую и пятую мишень соответственно.
Правило с селектором .first + li читается как “стили для элемента li, который является соседним по отношению к элементу с классом first”.

5 лайков
7

спасибо, за пояснение. Теперь разобралась:)

8

Похоже я туплю
Я не догадался сделать короткие записи как предложили в первых двух вариантах.а писал по д каждый отдельно. Но вопрос[quote=“Ineska, post:6, topic:2621”]
li + .first
[/quote]

у меня не работает.
У меня так отрабатывает
.first + li {
background-color:red;
}
а

li + .fourth {
background-color:white;
}
не отработал

поетому пришлось

li {
background-color:white;
}

в чем прикол?

1 лайк
9

Вы правы. Наоборот пишется. Спасибо)

1 лайк
10

Добрый день!
Мне кажется, это не самый удачный пример для темы соседние селекторы, ибо я как-то не видно смысла, в принципе, в правиле для соседних селекторов, когда можно проще теми же двумя классами напрямую закрасить 2 и 5 мишень. Подскажите, пожалуйста, какой-то более удачный пример необходимости использованиясоседних селекторов.

11

По-моему достаточно удачный в задании пример. Другой момент, что чаще всего удобнее обращаться к элементу по его же классу, а не через соседа. Пример, в котором единственным вариантом будет использование соседнего селектора, …
Вот: input[type=“radio”] + label - когда необходимо стилизовать подпись к конкретному полю или input[type=“radio”]:checked + label - только к выбранному полю.

12

Ну вот и я о том, что проще через собственный класс элемента, а не через соседа :slight_smile:

А пример хороший, спасибо!

1 лайк
13

А я решил несколько более громоздко,но что приятно ,своими мозгами…но как решил задачу maximtwinkle мне понраву больше.)
first{
background-color:white
}
.first + li {
background-color: red;
}
li+li {
background-color: white;
}
.fourth + li {
background-color: red;
}

14

если для всех элементов списка вы уже прописали белый цвет, то зачем тогда вот это правило:

li+li {
background-color: white;
}

2 лайка
15

Спасибо что заметили,исправил…)
li{
background-color:white
} - это уже из подсмотренной версии прохождения,не посмотрел что скопировал)

16

Блин. Я не понимаю это!! =(
.first + li,
.fourth + li {
background-color: red;
}
почему третью в белый не раскрасили?

17

Выбираем не всех “соседей”, а только первого.