При использовании id доступны все
манипуляции с селекторами, которые мы изучили
в предыдущих уроках.
Пример
Пусть у нас есть следующий код:
<div id="block">
<h2>заголовок</h2>
<p>текст</p>
<p>текст</p>
</div>
Давайте выберем h2 из элемента с id,
равным block, и покрасим его в красный
цвет:
#block h2 {
color: red;
}
А теперь давайте выберем p из элемента с
id, равным block, и покрасим
его в зеленый цвет:
#block p {
color: green;
}
Пример
Пусть теперь у нас есть следующий код:
<div id="block">
<h2 class="header">заголовок</h2>
<p>текст</p>
<p>текст</p>
<h3 class="header">заголовок</h3>
<p>текст</p>
<p>текст</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>выбрать</h2>
<p>не выбирать</p>
<h2>выбрать</h2>
<p>не выбирать</p>
</div>
<h2>не выбирать</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>