При використанні 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>