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

Курсы
1

Вообще не поняла про эти селекторы. HTML-код менять нельзя, а class=“third” почему-то у 3-го элемента, а в задании надо 4-й раскрасить. и не понимаю почему два shooter’a связаны и изменения происходят сразу на двух. не понимаю когда нужно плюс ставить,а когда запятую. теория не очень доходчиво расписана в этом уроке

.target+li,.third {
background-color: red;
}
.shooter-2+ .target,li {
background-color: yellow;
}

1 лайк
2

Класс написан у третьего элемента специально, чтобы вы воспользовались соседним селектором.
Но давайте по порядку.
Начнем в того, чтобы покрасим все мишени в белый. Это просто:

 li {
    background-color: white;
}

Дальше сложнее, ведь как вы и написали класс есть у третьего элемента, а нам нужно получить доступ к четвертому. Здесь и воспользуемся соседним селектором.
Если написать .third+li - это и будет селектор, обозначающий четвертый элемент (читается: элемент li, перед которым расположен элемент с классом third).
Но есть проблема. В коде два элемента с классом third, у первого и у второго стрелка.
Поэтому вначале нужно уточнить, что мы имеем в виду только первого: .shooter-1
Полный селектор будет таким: .shooter-1 .third+li
Дальше сами.

4 лайка
3

Скажите пожалуйста, можно ли сделать задание вот так:

Хотя в ответе вот так:

1 лайк
4

В рамках задания - можно. А вообще лучше дописывать родителя вначале, ведь список на странице может быть не один.

5

100%

li {
background-color: white;
}
.shooter-1 .third + li {
background-color: red;
}

.shooter-2 .first + li {
background-color: red;
}

.shooter-2 .third + li {
background-color: yellow;
}

6

А, я вот как то так миксанул:
li {
background-color: white;
}
.shooter-1 .third + li, .shooter-2 .first + li {
background-color: red;
}
.shooter-2 .third + li {
background-color: yellow;
}
Думаю, так тоже правильно!?