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

Селектор потомков на CSS

Пусть у нас есть список ul и список ol:

<ul> <li>пункт</li> <li>пункт</li> <li>пункт</li> <li>пункт</li> <li>пункт</li> </ul> <ol> <li>пункт</li> <li>пункт</li> <li>пункт</li> <li>пункт</li> <li>пункт</li> </ol>

Давайте покрасим теги li в этих списках в красный цвет:

li { color: red; }

Пусть теперь мы хотим покрасить теги li списка ul в красный цвет, а теги li списка ol - в зеленый.

В этом случае нам поможет селектор потомков. Он позволяет выбирать теги по их родителю. Для этого нужно указать селектор родителя, а через пробел - селектор потомка. В нашем случае селектор ul li выберет все теги li из списка ul, а селектор ol li - выберет все теги li из списка ol. Покрасим их в нужные цвета:

ul li { color: red; } ol li { color: green; }

Дан следующий код:

<ul> <li>пункт <i>курсив</i></li> <li>пункт <i>курсив</i></li> <li>пункт <i>курсив</i></li> <li>пункт <i>курсив</i></li> </ul> <p> текст абзаца <i>курсив</i> </p> <p> текст абзаца <i>курсив</i> </p>

Покрасьте в красный цвет курсив из тегов ul, а в зеленый цвет - курсив из тегов p.

Замечание

Селектор потомков не обязательно должен состоять из двух селекторов тегов - их может быть любое количество, записанное через пробел. В следующем коде, например, выбираются все теги i, находящиеся внутри тега li, которые в свою очередь находятся внутри тега ul:

ul li i { color: red; }

Дан следующий код:

<p> текст абзаца <b><i>жирный курсив</i></b> </p> <p> текст абзаца <i>курсив</i> </p>

Покрасьте в красный цвет курсив, находящийся внутри тега b, который в свою очередь находится внутри тега p.