Използване на id в CSS

При използване на id са достъпни всички манипулации със селектори, които научихме в предишните уроци.

Пример

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

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

Нека изберем h2 от елемента с id, равен на block, и го оцветим в червен цвят:

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>