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

Всем привет!
Долго мучалась над этим испытанием, проходила его 2 раза с промежутком в полгода.
Гуглила, пробовала разные варианты, читала форум и смотрела решение других участников. И даже это не особо помогло.
НО! Я наконец-то разобралась и решила создать эту тему, где постараюсь подробно объяснить логику решения этого испытания, мне бы такой ответ очень бы помог в своё время и, надеюсь, кому-то тоже пригодится.

Итак, вот последовательность решения.
Самым первым и логичным шагом будет изучение html кода. В нём мы видим:

  1. 2 дива шутеров (shooter-1 и shooter-2).
  2. В этих дивах есть повторяющийся ul target.
  3. В этом ul target есть по 5 li.
    3.1. У shooter-1 в 3х li есть класс miss.
  4. У каждой li внутри есть 2 дива hitbox и lever.
  5. У lever внутри есть пустой span.

Всё просто. Осталось понять кто есть кто.
Первым делом смотрим на цвет первых двух селекторов, очевидно это главные блоки. А именно shooter-1 и shooter-2. У первого еще и бордер черточками.

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

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

Далее смотрим на третий селектор и видим его размер и цвет 200х25px- это белый прямоугольник, а значит наш target.

.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. Тоесть первым делом мы рисуем 5 черных кружков.

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

А вот следующее свойство, какой-то серый маленький кружочек и есть наш hitbox.

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

Но он пока без ножки. Где же она? Логично что прямо под ним. Вспоминаем html. Кто там был внутри левера? А точно, пустой span.

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

И теперь у нас есть все хитбоксы и все леверы, вот только леверы перекрывают хитбоксы, нам нужно спрятать лишние.

У первого шутера ненужные помечены классом miss.

.miss .lever {
display: none;
}

А у второго придется воспользоваться псевдоклассами.

.shooter-2 li:first-child .lever {
display: none;
}

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

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

Надеюсь это объяснение будет кому-то полезно.
Выполнено на 100%. В коде никаких изменений не делала.

145 симпатий

Конечно, будет очень полезно.
Большое спасибо. Ваша инструкция поможет еще многим :slight_smile:

15 симпатий

Я именно так все и делал. Но застрял на последних трех мишенях.
Я писал .shooter-2 .lever:nth-child(1). То есть я хочу закрыть lever у второго стрелка.Вот я и не пойму, почему это не работает? Подскажите, пожалуйста, ведь я логично обращаюсь к браузеру. Почему он не понимает? Или псевдокласс nth-child работает только для тегов? Или может он работает только для тега li? Если только для тегов, тогда все встает на свои места.

Я, правда, сама только всё это изучаю, но попытаюсь объяснить как я это понимаю.
Если что знающие могут поправить.

nth-child добавляется к любым элементам.

Но если вы пишите:
.shooter-2 .lever:nth-child(1)

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

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

п.с. к первому ребенку лучше обращаться через first-child.

3 симпатии

Вспомните задания с биатлонистами. Там мы обращались к мишеням через li напрямую, указывая порядковый номер в списке. Т.е. li:nth-child(3). У нас есть в shooter-2 много lever. По логике я к ним и обращаюсь через цифру в скобке, мол это свойство относится к lever под номером 1 в shooter-2. А по вашему надо обратиться к lever через порядковый номер li. Получается псевдокласс работает только с тегами, а не с классами. Я так понял. Спасибо за ваш ответ все же.

Немного поправлю. Не к ребенку .lever-a, а к самому .lever-у, который должен быть первым дочерним элементом у своего родителя.

Нет. Псевдоклассы работают и с тегами тоже.

В рамках использования nth-child не совсем так. nth-child считается в пределах родителя.
В данном случае внутри каждого li всего один .lever.
Поэтому, как сказала @alin, вы сначала должны уточнить, какой именно li выбираете.

2 симпатии

Так у lever родитель div получается. По вашему правильнее было бы shooter-2 div:nth-child(2) .lever. Я уже ушел дальше в изучении, но если мне память не изменяет, там было дерево shooter-2 - ul - li - div - lever

Покажите, кто здесь для кого родитель:

<div class="shooter-2">
            <ul class="target">
                <li>
                    <div class="hitbox"></div>
                    <div class="lever"><span></span></div>
                </li>
                <li>
                    <div class="hitbox"></div>
                    <div class="lever"><span></span></div>
                </li>
                <li>
                    <div class="hitbox"></div>
                    <div class="lever"><span></span></div>
                </li>
                <li>
                    <div class="hitbox"></div>
                    <div class="lever"><span></span></div>
                </li>
                <li>
                    <div class="hitbox"></div>
                    <div class="lever"><span></span></div>
                </li>
            </ul>
        </div>

Как я понял из изучения, родитель - это ближайший предыдущий тег. Потомок - это любой последующий. Таким образом shooter-2 родитель для ul. Ul родитель для li, он для div, div для lever. Но пока я это писал, я заметил, что shooter-2 сам находится в div-е. Т.е. вы имеете ввиду, что div для всех родитель? Это моя ошибка?

Вы .hitbox в родители для .lever записали (потому что предыдущий), я правильно поняла?

Нет. Моя логика была такая, что lever находится в div, поэтому он для него родитель. Но сейчас я понял, что они неразрывно связаны как бы. Т.е. div class=“lever” это одно целое, а родитель для этого li.

Да, именно так.

1 симпатия

А можно ли было записать таким образом? shooter-2 li:nth-child(1) div:nth-child(2)

Можно, если вам это необходимо для понимания. Но лучше обращаться к элементу по классу, а не высчитывать порядок, ведь он может поменяться.

Спасибо большое за разъяснения. Постараюсь запомнить этот момент. Но в голове все равно отложилось, что браузер может перескакивать через теги в поисках нужного. Я это представлял немного по-другому, мол, эй браузер, найди мне все lever-ы по порядку после shooter-2. Не обращая внимания, что надо указывать родителя. Ведь в некоторых случаях он перескакивает в поисках, например через тег ul. Теперь я понимаю, что это ведь не родитель и постараюсь запомнить. Еще раз спасибо вам)))

1 симпатия

Cпасибо Alin.

1 симпатия

Alin спасибо за раскладку. Очень помогла.
Вопрос если вместо .target поставлю ul ничего не изменится?

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

1 симпатия

спасибо! сорри конечно за вопрос , я еще только учусь и куча вопросов.
в этом задании два ul.
и еще мы используем li , и на странице этих элиментов тоже может быть несколько?

подсакажите пожалуйста а такой вариант можно использовать?

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

1 симпатия