Слабовато понял селекторы и решил пройти курс ещё раз, с теми знаниями которые накопил после них. Когда решил написать классы в ряд чтобы сократить СSS-код, то столкнулся с не большим не понятием в CSS. Когда пишу цвет пятой мишени для первого стрелка, автоматически закрашивается пятая и у вторго, хотя по идеи так не должно быть. Например вторая и первая мишень ведёт себя правильно. Также с третей и четвёртой мишенью, автоматически закрашиваются в белый цвет.
Поясните что не так.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Контекстные селекторы</title>
<link rel="stylesheet" href="/assets/course7/course-2.css">
</head>
<body>
<div class="shooter-1">
<ul class="target">
<li class="first">1</li>
<li class="second">2</li>
<li class="third">3</li>
<li class="fourth">4</li>
<li class="fifth">5</li>
</ul>
</div>
<div class="shooter-2">
<ul class="target">
<li class="first">1</li>
<li class="second">2</li>
<li class="third">3</li>
<li class="fourth">4</li>
<li class="fifth">5</li>
</ul>
</div>
</body>
</html>
.shooter-1 .first, .third, .fourth {
background-color: white;
}
.shooter-1 .second, .fifth {
background-color: red;
}
.shooter-2 .second, .third {
background-color: white;
}
.shooter-2 .first {
background-color: red;
}
