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

Aleksandr_Peterikov · 20.Июль.2017 11:37:25

Cпасибо, большое! Я уже хотел все бросать…))

romul · 30.Июль.2017 18:09:59

Спасибо БОльшое, сильно помогли!

Pavel_Penikov · 09.Август.2017 09:12:05

Я тоже наступил на эти грабли. Суть в том, что nth:child и вообще все селекторы про дочерние элементы, работают именно с дочерними, а не с потомками.
У нас есть родительский .target, а в нем дочерние li.
В вашем варианте вы пытаетесь указать отображение потомку .lever
Плюс попадание отрисовывается двумя элементами: span и .lever, а .hitbox трогать не надо.
Получается, что если хотим отключить белую крышку и рычаг у второго стрелка в первой мишени, то пишем:
.shooter-2 li:nth-child(1) .lever {
display: none;
}

“Display:none на все элементы .lever (и их содержимое) в элементе li первом по счёту, которые лежат в элементе shooter-2”

futuramochka · 09.Август.2017 15:42:36

Спасибо человеку выложившему это объяснение я на 90% сделал, но кстати вообще по своей дурацкой логике. Всё больше казалось что нужно сразу создавать соединения сложных селекторов)). А теперь всё ясно как в божий день. Вот это по человечески! Большое вам спасибо!

Tvoj_Drug · 19.Август.2017 11:16:26

Блин,у меня вообще фигня.
Мишень улетела кудато далеко-далкео…
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);
}

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

Alexey_Ivanov · 19.Август.2017 13:29:00

У Вас написан селектор li с точкой. Однако это селектор по тегу, а не по классу… Может, в этом дело?

Aliaksandr_Lisouski · 10.Сентябрь.2017 12:06:21

вам место в раю обеспечено. я потратил три часа, что бы получить это http://prntscr.com/gjda2r
CSS код сего
`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);
}

selector {
display: none;
}

selector {
display: none;
}`, а дальше тупик. Спасибо за подсказку

Aleksandr_Selyaninov · 15.Сентябрь.2017 12:21:54

А я пол вечера потратил и недопер )))
Спасибо! ))

SA_wpolo · 15.Сентябрь.2017 19:14:47

Программирование изучал давно, в начале 2000-х. Решил потренироваться в вёрстке. Курс в принципе не плохой, но не достаточно теории. Нет простого и понятного взгляда на общую концепцию CSS. Тогда бы всем было бы проще. 18 задание, для новичка будет совершенно простым, да и вообще любое, если понять общую структуру построения правил. В начале прописываются правила отрисовки - li , .hitbox, .lever , span - нарисовали все элементы, теперь ненужное запрещаем - .miss .lever, .shooter-2 li:first-child .lever и т.д. Весь CSS на этом стоит. Короче нужно видеть общую концепцию построения, и когда это понимание придёт, вёрстка будет отлетать как семечки.

angry · 25.Сентябрь.2017 16:54:08

Спасибо тебе.
Не долго думая решил сразу заглянуть на форум.

my_name_is_Max · 26.Сентябрь.2017 08:20:49

У меня так сработало. Селектор с diplay none не использовался. Толком даже не разъяснялось что такое display. Почему его в контрольную работу вставили?

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

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

Olie · 03.Октябрь.2017 14:13:41

Огромное спасибо за подробное раз.яснение!))

Nikita_Cherevatyi · 03.Октябрь.2017 21:19:42

Кто может объяснить, почему span не распостраняется на сбитые мишени?

Andriy_Grinevych · 20.Октябрь.2017 15:15:41

не знаю кто как, но я бы не решил это самостоятельно. Всё что смог сам это цвета для “sooter1-2” задать. Спасибо автору!!! очередной и окончательный повод подыскать литературу HTML, CSS !!!

DocMok · 23.Октябрь.2017 11:37:25

Так же делал
Что такое display знал и раньше, но не использовал, так как не проходили этого в курсе.

ShadowKing · 23.Октябрь.2017 20:03:18

Без Вашего разъяснения не смог пройти данное задание. Первое испытание, где я провалил все 10 попыток проверки. Просто с психу т.к. ну вот вообще не получалось. Так быстро давались мне другие испытания, а на этом почувствовал себя очень глупым

Egor_Tkachev · 24.Октябрь.2017 08:48:10

Начал так же как и Вашем решении, потом потерялся.
Курс “Селекторы, часть 1” прошел второй раз, думал что-то упустил. сейчас опять еще раз пройду…

ЗЫ display разбирали в достаточной мере, чтобы понять, что он либо скрывает, либо показывает.

Dmitry_Koltsov · 27.Октябрь.2017 12:52:39

Уф, оказывается, все так просто, спасибо Вам большое)) Посидел минут 30, сделал задание по-своему, но на 97%, потом понял, что что-то не так, и полез на форум.
Код получился совсем не такой компактный и красивый, как у автора, в двух местах пришлось изменить позиционирование с absolute на relative, потому что изначально пошел не в ту степь, но в итоге все равно удалось выполнить задание. И получилось так, что display: none не понадобилось. Вот код, если кому интересно:

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

.shooter-1 .miss,
.shooter-2 li:nth-child(1),
.shooter-2 li:nth-child(4), 
.shooter-2 li:nth-child(5) {
    position: relative;
    width: 22px;
    height: 22px;
    border: 1px solid black;
    border-radius: 50%;
    background: #333333;
    font-size: 0;
}

.shooter-1 .miss .hitbox,
.shooter-2 li:nth-child(1) .hitbox,
.shooter-2 li:nth-child(4) .hitbox, 
.shooter-2 li:nth-child(5) .hitbox {
    width: 10px;
    height: 10px;
    margin: 6px auto;
    border-radius: 50%;
    background: #999999;
}
.shooter-1 li:first-child,
.shooter-1 li:nth-child(4),
.shooter-2 li:nth-child(2),
.shooter-2 li:nth-child(3) {   
    position: relative;
    top: -1px;
    left: -1px;
    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,
.shooter-1 li:nth-child(4) .lever,
.shooter-2 li:nth-child(2) .lever, 
.shooter-2 li:nth-child(3) .lever {
    position: relative;
    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;
}

perfectf8 · 30.Октябрь.2017 07:45:55

Вот,хоть убей,не понимаю,по какой логике пишется тег li в li:nth-child(2) (к примеру),если нужно указать порядковый номер элемента СПИСКА,почему не ul:nth-child(2)? Или это уже будет “список номер два”?

Ineska · 30.Октябрь.2017 07:51:08

Да, это будет список №2.

Вы читайте селектор li:nth-child(2) правильно: “Элемент li, который является вторым по счету дочерним элементом своего родителя”.