Селекторы, часть 1 / Испытание. Дуэль. [18/18] Подробное объяснение решения. 100%

[eniMmi]

Большое спасибо за такое подробное разъяснение.))
У меня вот как раз со структурой вопросов не возникло, а был затык с закрытием селекторов, т.е. последние 4 свойства.

Задание мной выполнено на 100%, но задействованы только первый два свойства по закрытию “лишних” элементов. Т.е. последние два свойства не задействованы.
Ведь так, по идее логичнее? код меньше…

.miss .lever {
display: none;
}

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

selector {
display: none;
}

selector {
display: none;
}

[CeHbKA]

Спасибо Вам большое!
В таких мутных испытаниях не хватает подсказок, которые бы объясняли логику решения. Чаще всего достаточно просто въехать, по каким правилам нужно решать задание, и всё становится на свои места. Но вот правила эти не всегда понятны

[SLG]

Огромное спасибо! Долго мучался, Из-за Span никак решить не мог, тупо на него забил, и зря.

[KaiZerg]

Спасибо за подсказку, тоже долго мучался с подбором селекторов…

[Vladislav_Borodovoj]

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;
}
ul {
display: flex;
justify-content: space-between;
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;
width: 22px;
height: 22px;
border: 1px solid black;
border-radius: 50%;
background: #333333;
font-size: 0;
}
.hitbox {
width: 10px;
height: 10px;
margin: 6px auto;
border-radius: 50%;
background: #999999;
}
.shooter-1 li:first-child .lever,
.shooter-1 li:nth-child(4) .lever,
.shooter-2 li:nth-child(2) .lever,
.shooter-2 li:nth-child(3) .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);
}
.shooter-1 li:first-child span,
.shooter-1 li:nth-child(4) span,
.shooter-2 li:nth-child(2) span,
.shooter-2 li:nth-child(3) 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);
}
selector {
display: none;
}
selector {
display: none;
}
selector {
display: none;
}
selector {
display: none;
}

Сделал так, без использования последних селекторов, или лучше было с их использованием?

[Kis_Oleh]

Я бы изменил концовку кода на:
.shooter-2 li:nth-child(1) .lever,
.shooter-2 li:nth-child(4) .lever,
.shooter-2 li:nth-child(5) .lever {
display: none;
}

[Viktoria_Volkovski]

Выполнила задание на 90% и застряла.
Большое спасибо за подсказку)
Я тут уже что только не пробовала)))

[Kate744]

Почему нельзя использовать span вместо lever:
.shooter-2 span li:last-child{
display: none;
}, ведь спан присутствует во всех леверах.

То вы обращаетесь к первому “ребенку” левера.
Но у левера в “детях” только span.

Поэтому нам нужно обратится к “детям” списка, а уже у них к леверу.
.shooter-2 li:nth-child(4) .lever

а если внутри li не у всех есть lever, то эта команда выберет только li, содержащие lever?
Тогда логичней сделать .shooter-2 li .lever:nth-child
То есть в shooter-2 выбираем все li, содержащие lever, и среди них nный элемент.

Имеет ли место быть способ не делать все белым с черточкой внизу, а сделать все черные с серой точкой, а уже отдельные, нужные нам элементы закрыть белой наклепкой с черточкой внизу?

нарисовали все элементы, теперь ненужное запрещаем - .miss .lever, .shooter-2 li:first-child .lever и т.д. Весь CSS на этом стоит.

почему именно так?

[Gag_Harutyunyan]

Можно так

.miss .lever{
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;
}

А можно и так

.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;
}

Тоже вариант уже не используя display: none;

.shooter-1 li:nth-child(1) .lever,
.shooter-1 li:nth-child(4) .lever,
.shooter-2 li:nth-child(2) .lever,
.shooter-2 li:nth-child(3) .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);
}

.shooter-1 li:nth-child(1) .lever span,
.shooter-1 li:nth-child(4) .lever span,
.shooter-2 li:nth-child(2) .lever span,
.shooter-2 li:nth-child(3) .lever 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);
}

[Ineska]

.shooter-2 span li:last-child

А разве есть хоть где-нибудь li, вложенный в span?

[Kate744]

Нет, но span вложен в li
тогда .shooter-2 li:last-child span

[Ineska]

Тоже нет. Таким образом вы скрываете только “палочку”.

[Elina1]

Спасибо alin за помощь! Задание трудное, но и интересное! Сама решила на 93%, пустили в следующее задание, но на душе как-то скребет, не люблю не законченные дела. Пол дня сидела, пока башка не вскипела, пол второго ночи аж тошнить стало! Спать, думаю, буду плохо, если не увижу решение. Ваше - мне самое близкое, я уперлась в селекторы с display: none;. Другим участникам форума тоже спасибо за их решения, я увидела другой подход и каскадность! Ура Академии!

[Marina_D]

Когда увидела задание, думала, что не сделаю это никогда, до того сложным оно казалось. Но внезапно все оказалось предельно легким, и на решение ушло всего полтора дня

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 {
display: flex;
justify-content: space-between;
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;
width: 22px;
height: 22px;
border: 1px solid black;
border-radius: 50%;
background: #333333;
font-size: 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.miss > div.lever,
.shooter-2 li:nth-child(1) > div.lever,
.shooter-2 li:nth-child(4) > div.lever,
.shooter-2 li:nth-child(5) > div.lever {
display: none;
}

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

selector {
display: none;
}

selector {
display: none;
}

[Afresh98]

Премного благодарен!

[Oleg_Shyn]

Вы последние 4 селектора перегрузили записями. Я сделал чуть короче.

.miss .lever {
display: none;
}

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

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

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

[Marina_D]

Спасибо!

[kirill_lalala]

При
.miss{
display: none;
}
Должны пропадать 2,3 и 5 мишени.
А пропадают 2,3,4. Почему так?

[Ineska]

Почему вы так решили?

[mamed]

Если кто не согласен, прошу сильно не ругаться, но изложу свое имхо.
РАЗОЧАРОВАЛО!!! И немного разозлило. Если предыдущие итоговые задания базировались целиком на вышеописанной теории, то здесь поначалу я был немного ошарашен. Подберите селекторы к css-правилам, две трети из которых до сих пор не были описаны вообще или были описаны поверхностно. Мало того, что задание про сферического коня в вакууме (вряд ли мне доведется когда-нибудь рисовать очко биатлониста ,) так еще для его решения (выяснение назначения неизвестных правил) надо потратить впятеро больше времени, чем на весь курс, целиком вполне понятный и несложный.
З.Ы. ТС-у спасибо за обьяснение и особенно за решение. Каюсь, втупую скопипастил.