# Использование id на CSS

При использовании `id` доступны все манипуляции с селекторами, которые мы изучили в предыдущих уроках.

## Пример

Пусть у нас есть следующий код:

`<div id="block"> <h2>заголовок</h2> <p>текст</p> <p>текст</p> </div>`

Давайте выберем `h2` из элемента с `id`, равным `block`, и покрасим его в красный цвет:

`#block h2 { color: red; }`

А теперь давайте выберем p из элемента с `id`, равным `block`, и покрасим его в зеленый цвет:

`#block p { color: green; }`

## Пример

Пусть теперь у нас есть следующий код:

`<div id="block"> <h2 class="header">заголовок</h2> <p>текст</p> <p>текст</p> <h3 class="header">заголовок</h3> <p>текст</p> <p>текст</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>выбрать</h2> <p>не выбирать</p> <h2>выбрать</h2> <p>не выбирать</p> </div> <h2>не выбирать</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>`
←→
↑