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

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

После выполнения этого упражнения, начал экспериментировать с CSS и кое что не понял…

        <div class="shooter-2">
        <ul class="target">
            <li class="first">1</li>
            <li>2</li>
            <li class="third">3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>

.shooter-2 .first + li {background-color:red;} - как я ожидал, второй кружочек  красится в красный цвет.
.shooter-2 .target + li {background-color:red;} - а почему с этим кодом ничего не красится? Я ожидал, что покрасится в красный цвет первый кружочек.
2

потому что соседние селекторы это сестры-братья (т.е. селекторы одного уровня), например, все li
а .target и li это уже отношения родитель-потомок и как соседство не рассматривается

1 лайк
3

почему не работает

.target .first + third {background-color:red;}

?

4

Потому что third без точки в начале.

5

Потому, что класс third должен начинаться с точки.
Но, с точкой тоже не будет работать, потому, что в примере селекторы не соседние.

Работать будет вот так (здесь селекторы соседние):
.target .first + li + .third {
background: red;
}