Селекторы, часть 1 / Испытание. Дуэль.(100%)

В общем получилось сделать,но чувствую что можно было бы сделать и лучше.Что посоветуете?

body {
width: 280px;
margin: 0;
padding: 0;
}

.shooter-1 {
padding: 55px 0 55px 0;
border-bottom: 1px dashed #cccccc;
background: #fcf8e3;
}

.shooter-2 {
padding: 55px 0 55px 0;
background: #d9edf7;
}

.target {
width: 200px;
height: 25px;
margin: 0 auto;
padding: 10px 15px 10px 15px;
border-radius: 2px;
background: white;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
overflow: hidden;
list-style: none;
}

li {
position: relative;
float: left;
width: 22px;
height: 22px;
margin-right: 20px;
border: 1px solid black;
border-radius: 50%;
background: #333333;
font-size: 0;
}

li:last-child {
margin-right: 0;
}

.hitbox{
width: 10px;
height: 10px;
margin: 6px auto;
border-radius: 50%;
background: #999999;
}

.lever {
position: absolute;
top: -2px;
left: -2px;
width: 26px;
height: 26px;
border-radius: 50%;
background: #f5f5f5;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

span {
position: absolute;
top: 12px;
left: 11px;
width: 5px;
height: 25px;
background: #f5f5f5;
box-shadow:
-1px 15px 2px rgba(0, 0,0 , 0.3),
1px 15px 2px rgba(0, 0, 0, 0.3);
}

.shooter-1 li:nth-child(2) span,
.shooter-1 li:nth-child(3) span,
.shooter-1 li:nth-child(5) span,
.shooter-2 li:nth-child(1) span,
.shooter-2 li:nth-child(4) span,
.shooter-2 li:nth-child(5) span{
display: none;
}
.shooter-1 li:nth-child(2) .lever,
.shooter-1 li:nth-child(3) .lever,
.shooter-1 li:nth-child(5) .lever,
.shooter-2 li:nth-child(1) .lever,
.shooter-2 li:nth-child(4) .lever,
.shooter-2 li:nth-child(5) .lever
{
display: none;
}

selector {
display: none;
}

selector {
display: none;
}

1 лайк

Последние шестиэтажные селекторы - это плохой прием.
Используйте все четыре правила с display: none;
Обратите внимание, что в разметке мишеней первого стрелка есть класс .miss, который можно использовать для выбора мишеней.

1 лайк

Вообще не заметил класс .miss представьте)
Поменял следующим образом часть кода:

.shooter-2 li:nth-child(1) span,
.shooter-2 li:nth-child(4) span,
.shooter-2 li:nth-child(5) span {
display: none;
}

.shooter-2 li:nth-child(1) .lever,
.shooter-2 li:nth-child(4) .lever,
.shooter-2 li:nth-child(5) .lever {
display: none;
}

.miss .lever {
display: none;
}

selector {
display: none;
}

Можно было бы еще использовать последнее правило display но я уже не стал
Спасибо за отзыв:)

А почему вы отдельно убираете span и .lever для мишеней второго стрелка?
Вот фрагмент разметки:
<div class="lever"><span></span></div>
Если для .lever вы пишете display: none;, то span не будет отображаться, потому что он вложен в .lever.

У меня ход мыслей был примерно таким:
.hitbox - выходит у нас мишень черная с серым кружком внутри и это промах
.lever - закрашенная белым мишень и это попадание
span - ножка у мишеней с попаданием
1-я задача.Поставить всем мишеням .hitbox
2-я задача.Поставить всем мишеням .lever
3-я задача.Поставить всем мишеням ножку span
Теперь у нас выходят все мишени белого цвета с ножками
4-я задача(определить мишени с промахами у первого стрелка).Нужно убрать признаки попадания у li class=“miss”(.lever и span) поэтому я и поставил селектор .miss .lever На этом этапе верхняя картинка вышла хорошо но с нижней беда,классов там нету.
5-я задача.Ну тут я решил просто отдельно убрать span(ножки) у мишеней по которым не попали и убрать .lever(верхний белый слой на мишенях без ножки)

Очень правильный у вас ход мыслей)
По поводу 5-ой задачи: если родительский элемент .lever вы убрали (display: none;), то span (ножка), поскольку является дочерним по отношению к .lever - исчезает автоматически.

1 лайк

Ну мне как раз и надо было чтобы span исчезла вместе с .lever ,просто совпало так.Кстати я когда убирал .lever в классе .miss сразу и не понял почему пропала и span вместе с ним,вот только после вашего комментария понял что дочерний элемент так же пропадет если убрать родительский.Если бы убирать только .lever можно было бы думаю поставить селектор примерно следующим образом : .miss div[class=“lever”] но возможно я и не прав.

У меня беда еще в том,что я по неопытности стараюсь сделать так,чтобы результат работы совпадал максимально с поставленной задачей в визуальном плане,на оптимизацию кода особо не смотрю.Вот благодаря вам буду стремится и к оптимизации:) ,спасибо за помощь

1 лайк

Вряд ли так можно. Дочерний все равно исчезнет. Чтобы можно было убирать span и lever отдельно, надо чтобы в разметке они стояли так:
<div class="lever"></div>
<span></span>

1 лайк

Да,точно.Сделал селектор .miss div[class=“lever”] и дочерний все равно пропал.Потом сделал <div class="lever"></div> <span></span>
и оставил селектор .miss div[class="lever"] и ножки появились но вид у них страшноватый)

1 лайк

Вроде разобрался, все понял, на деле черт оказался не так страшен, как казался первый час. Только вот уже мозги кипят - подскажите пожалуйста, почему после обозначения селектора li, у нас последний элемент списка переходит на вторую строчку и нужно потом обязательно добавлять last child отступ справа нулевой.

Не дублируйте сообщения! Ответ от этого быстрее не получить.