Користење на id во CSS

При користење на id се достапни сите манипулации со селектори кои ги учевме во претходните лекции.

Пример

Нека имаме следниов код:

html<div id="block">
  <h2>Title</h2>
  <p>text</p>
  <p>text</p>
</div>

Ајде да го избереме h2 од елементот со id, еднаков на block, и да го обоime во црвена боја:

css#block h2 {
  color: red;
}

А сега ајде да ги избереме p од елементот со id, еднаков на block, и да ги обоиме во зелена боја:

css#block p {
  color: green;
}

Пример

Нека сега имаме следниов код:

html<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, и да ги обоиме во црвена боја:

css#block .header {
  color: red;
}

А сега да ги избереме насловите h2 со класа header, кои се наоѓаат внатре во елементот со id, еднаков на block, и да ги обоиме во црвена боја:

css#block h2.header {
  color: red;
}

Практични задачи

Задание 1

Напишете селектор кој ќе ги избере сите h2, кои се наоѓаат во елементот со id, еднаков на elem. Тестирајте го вашиот селектор на следниов код:

html<div id="elem">
  <h2>Choose</h2>
  <p>---</p>
  
  <h2>Choose</h2>
  <p>---</p>
</div>

<h2>Do not +++</h2>
<p>---</p>

Задание 2

Напишете селектор кој ќе ги избере сите елементи со класа text, кои се наоѓаат во елементот со id, еднаков на elem. Тестирајте го вашиот селектор на следниов код:

html<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>

Задание 3

Напишете селектор кој ќе ги избере сите параграфи со класа text, кои се наоѓаат во елементот со id, еднаков на elem. Тестирајте го вашиот селектор на следниов код:

html<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>

Задание 4

Напишете селектор кој ќе ги избере сите li со класа text, кои се наоѓаат во елементот со id, еднаков на elem. Тестирајте го вашиот селектор на следниов код:

html<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>