Использование id в CSS
При использовании id доступны все
манипуляции с селекторами, которые мы изучили
в предыдущих уроках.
Пример
Пусть у нас есть следующий код:
<div id="block">
<h2>Title</h2>
<p>text</p>
<p>text</p>
</div>
Давайте выберем h2 из элемента с id,
равным block, и покрасим его в красный
цвет:
#block h2 {
color: red;
}
А теперь давайте выберем p из элемента с
id, равным block, и покрасим
его в зеленый цвет:
#block p {
color: green;
}
Пример
Пусть теперь у нас есть следующий код:
<div id="block">
<h2 class="header">Title</h2>
<p>text</p>
<p>text</p>
<h3 class="header">Title</h3>
<p>text</p>
<p>text</p>
</div>
Давайте выберем элементы с классом header,
находящийся внутри элемента с id,
равным block, и покрасим их
в красный цвет:
#block .header {
color: red;
}
А теперь выберем заголовки h2 с классом
header, находящийся внутри элемента
с id, равным block, и покрасим
их в красный цвет:
#block h2.header {
color: red;
}
Практические задачи
Напишите селектор, который выберет все h2,
находящиеся в элементе с id, равным
elem. Проверьте ваш селектор на следующем
коде:
<div id="elem">
<h2>Choose</h2>
<p>---</p>
<h2>Choose</h2>
<p>---</p>
</div>
<h2>Do not +++</h2>
<p>---</p>
Напишите селектор, который выберет все элементы
с классом text, находящиеся в элементе
с id, равным elem. Проверьте
ваш селектор на следующем коде:
<div id="elem">
<p class="text">+++</p>
<p class="text">+++</p>
<ul>
<li class="text">+++</li>
<li class="text">+++</li>
<li class="text">+++</li>
<li>---</li>
<li>---</li>
</ul>
</div>
<p class="text">---</p>
Напишите селектор, который выберет все абзацы
с классом text, находящиеся в элементе
с id, равным elem. Проверьте
ваш селектор на следующем коде:
<div id="elem">
<p class="text">+++</p>
<p class="text">+++</p>
<ul>
<li class="text">---</li>
<li class="text">---</li>
<li class="text">---</li>
<li>---</li>
<li>---</li>
</ul>
</div>
<p class="text">---</p>
Напишите селектор, который выберет все li
с классом text, находящиеся в элементе
с id, равным elem. Проверьте
ваш селектор на следующем коде:
<div id="elem">
<p class="text">---</p>
<p class="text">---</p>
<ul>
<li class="text">+++</li>
<li class="text">+++</li>
<li class="text">+++</li>
<li>---</li>
<li>---</li>
</ul>
</div>
<p class="text">---</p>