Наследование и каскадирование / Битва за курочку. Раунд третий [11/18]
×

Битва за курочку. Раунд третий [11/18]

А теперь посмотрим, как ведут себя контекстные селекторы.

<div class="experiment">
    <p class="red blue">Синий или красный?</p>
</div>

И в CSS используем контекстный селектор для второго правила:

p.blue {
    color: blue;
}

.experiment .red {
    color: red;
}

Какой теперь будет цвет текста?

Кексик и Рудольф помогут разобраться, какой селектор специфичнее.


Выполнить задание
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"> <style> .battle .to-rudolf { /* Рудольф вцепился сильнее */ margin-left: 120px; } </style> </head> <body> <h1>Кому достанется курочка?</h1> <div class="battle"> <div class="cat cat-keksik">Кексик</div> <div class="cat cat-rudolf">Рудольф</div> <div class="chicken to-keksik to-rudolf"></div> </div> </body> </html>
CSS
/* Усильте селектор этого правила, чтобы вырвать курочку */ .to-keksik { margin-left: -120px; }
HTML Academy
  1. Курочка должна снова вернуться к Кексику.

Изменять значения свойств в CSS нельзя: cистема это отслеживает и результат принимать не будет.

Теория Проверить Следующее задание
Идёт запись на курс Продвинутый HTML и CSS #10, который стартует 27 февраля.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.