Използване на 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>
