мое новое расписание: пн-пт с 8.00 по 16.00 по москве, сб и вс - выходные; после 16.00 и на вых. отвечаю по возможности

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