Выкарыстанне 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>
