Наследование и каскадирование / Битва за курочку. Борьба накаляется [12/18]
×

Битва за курочку. Борьба накаляется [12/18]

Как вы уже знаете, существуют селекторы не только по классам, но и по id. Они начинаются с решётки #.

HTML:

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

CSS:

#experiment-1 .blue {
    color: blue;
}
.experiment .red {
    color: red;
}

Особенность атрибута id заключается в том, что его значение должно быть уникальным в пределах страницы. То есть, может существовать только один тег с определенным значением id.

Получается, что селектор по id может выбрать только один элемент. И поэтому он на порядок специфичнее селекторов по тегам, классам, а также комбинаций этих селекторов.

Кексик и Рудольф демонстрируют его работу.


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

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

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

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

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

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

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