Испытание дуэль

Курсы §8. Селекторы
1

Не могу понять почему при использовании конструкции:
.hitbox {
position: relative;
float: left;
width: 22px;
height: 22px;
margin-right: 20px;
border: 1px solid black;
border-radius: 50%;
background: #333333;
font-size: 0;
}

.hitbox :last-child {
margin-right: 0;
}

последняя окружность не выравнивается в ряд к остальным.
Подскажите почему так?

P.S. знаю что по заданию нужно ставить li

2

Потому что всем окружностям задан margin-right: 20px; и 6-й окружности не хватает места (белый бокс меньше). Поэтому 6-й мишеньке нужно его ОБНУЛИТЬ!

3

.hitbox :last-child {
margin-right: 0;
}

  • это не обнуляет?
4

У Вас пробел между классом и :псевдокласса. Думаю, именно поэтому он не срабатывает.

1 лайк
5

Я сейчас подумал - потому что li это список, а .hitbox нет.
Вообще псевдокласс :child работает с классами?

6

Работает , @Alexey_Ivanov прав, дело в пробеле.

1 лайк
7

Дело не в пробеле.
Спасибо за ответы.

8

Да, только что ещё раз внимательно пересмотрел Ваши селекторы: у Вас неправильно задан селектор, так, как Вы хотели через .hitbox, не получится. Почему-поймёте, когда будете в платном разделе на темах “Селекторы-2” и “Селекторы-3”. Вам нужно было прописать вместо .hitbox {} и .hitbox:last-child - li {} и li:last-child, тогда всё сработает. Да, и в ПРОБЕЛЕ дело то же: не допускается между классом и псевдоклассом ставить пробел. Можете убедиться сами: добавьте его: li :last-child и увидите, что всё нарушится снова.