# Селектор потомков в CSS

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

`<ul> <li>text</li> <li>text</li> <li>text</li> <li>text</li> <li>text</li> </ul> <ol> <li>text</li> <li>text</li> <li>text</li> <li>text</li> <li>text</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; }`

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

`ul li i { color: red; }`

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

`<ul> <li>text <i>italic</i></li> <li>text <i>italic</i></li> <li>text <i>italic</i></li> <li>text <i>italic</i></li> </ul> <p> paragraph text <i>italic</i> </p> <p> paragraph text <i>italic</i> </p>`

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

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

`<p> paragraph text <b><i>bold italic</i></b> </p> <p> paragraph text <i>italic</i> </p>`

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

← →
↑