Битва за курочку. Раунд второй [10/18]
Чуть более сложный пример. Тот же HTML:
<p class="red blue">Синий или красный?</p>
Немного другой CSS:
p.blue {
color: blue;
}
.red {
color: red;
}
В этом случае текст абзаца будет синим. Происходит это потому, что селектор p.blue более специфичный, чем селектор .red.
Простое объяснение специфичности звучит так:
Чем меньшее количество элементов потенциально может выбрать селектор, тем он специфичнее.
В нашем примере селектор .red выберет все теги с нужным классом, а селектор p.blue выберет только абзацы с нужным классом.
Заметьте, что в этом задании одно из CSS-правил вынесено в заблокированный HTML-код, а вам нужно победить его, усилив другое CSS-правило.
Файл css4-34.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">
<style>
/* Усильте селектор этого правила, чтобы вырвать курочку */
div.chicken.to-rudolf {
margin-left: 120px;
}
</style>
<link href="https://htmlacademy.ru/assets/course66/battle.css" rel="stylesheet" type="text/css">
<style>
div.to-keksik { /* Кексик закрепляет преимущество */
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>
Битва за курочку. Раунд третий [11/18]
А теперь посмотрим, как ведут себя контекстные селекторы.
<div class="experiment">
<p class="red blue">Синий или красный?</p>
</div>
И в CSS используем контекстный селектор для второго правила:
p.blue {
color: blue;
}
.experiment .red {
color: red;
}
Какой теперь будет цвет текста?
Кексик и Рудольф помогут разобраться, какой селектор специфичнее.
Файл css4-35.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;
}
.battle .to-keksik {
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>
Битва за курочку. Борьба накаляется [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 может выбрать только один элемент. И поэтому он на порядок специфичнее селекторов по тегам, классам, а также комбинаций этих селекторов.
Кексик и Рудольф демонстрируют его работу.
Файл css4-36.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="https://htmlacademy.ru/assets/course66/battle.css" rel="stylesheet" type="text/css">
<style>
#keks-vs-rudolf .to-keksik { /* У Кекса железная хватка */
margin-left:120px;
}
#keks-vs-rudolf .to-rudolf { /* У Кекса железная хватка */
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>