Користење на id во CSS
При користење на id се достапни сите
манипулации со селектори кои ги учевме
во претходните лекции.
Пример
Нека имаме следниов код:
<div id="block">
<h2>Title</h2>
<p>text</p>
<p>text</p>
</div>
Ајде да го избереме h2 од елементот со id,
еднаков на block, и да го обоime во црвена
боја:
#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>
