# Использование 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>`
← →
↑