Битва за курочку 13/18. Почему так?

Курсы §16. Наследование и каскадирование
1

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Битва за курочку. Запрещённый приём</title>
        <meta charset="utf-8">
        <link href="https://fonts.googleapis.com/css?family=PT+Sans:400&subset=cyrillic" rel="stylesheet" type="text/css">
        <link href="/assets/course66/battle.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <h1>Кому достанется курочка?</h1>
        <div id="keks-vs-rudolf" class="battle">
            <div class="cat cat-keksik">Кексик</div>
            <div class="cat cat-rudolf">Рудольф</div>
            
            <!-- Видя, как победа ускользает из лап,
            Рудольф решается на запрещенный приём -->
            <div style="margin-left: 120px;" class="chicken to-keksik to-rudolf"></div>
        </div>
    </body>
</html>

CSS:

/* Усилением селектора здесь не обойтись.
Придётся ответить грубостью на грубость */

.to-keksik {
margin-left: -120px;
}

.chicken {
margin-left: -120px !important;
}

Вопрос:
Почему задание не засчитывается с таким селектором.
.chicken .to-keksik .to-rudolf {
margin-left: -120px !important;
}

Ведь, по сути, мы указываем тот же самый div, что и .chiсken. Кто-то из сэнпаев может объяснить?

2

Пробелы между частями селектора показывает вложенность. То есть по вашему селектору получается три блока, вложенных друг в друга. Но по коду это один div с тремя классами.

3

Я об этом же и говорю. И вопрос: почему браузер не узнаёт этот div, если я указываю класс (один из трёх), который свойственен только ему?

4

Должен узнавать. Покажите целиком код, который пишете в тот момент.

5

CSS:

/* Усилением селектора здесь не обойтись.

Придётся ответить грубостью на грубость */

.to-keksik {

margin-left: -120px;

}

.chicken {

margin-left: -120px !important;

}

6

Код работает, проверку проходит.

7

так прошло много лет но может кому поможет.
на поставленный вопрос
Вопрос:
Почему задание не засчитывается с таким селектором.

.chicken .to-keksik .to-rudolf {
margin-left: -120px !important;
}

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

.chicken.to-keksik.to-rudolf {
margin-left: -120px !important;
}