# Дочерний селектор в CSS

Дочерний селектор `>` позволяет выбирать элементы по непосредственной вложенности друг в друга.

## Синтаксис

`селектор1 > селектор2 { }`

## Пример

Давайте обратимся ко всем тегам `b`, непосредственно находящимся внутри тегов `p`, и покрасим их в красный цвет:

`<p> text <b>+</b> </p> <p> text <i><b>-</b></i> </p>` `p > b { color: red; }`

:

## Пример

Давайте обратимся ко всем тегам `b`, непосредственно находящимся внутри элементов с классом `.block`, и покрасим их в красный цвет:

`<p class="block"> text <b>+</b> </p> <p class="block"> text <i><b>-</b></i> </p> <p> text <b>-</b> </p>` `.block > b { color: red; }`

:

## Пример

Давайте обратимся ко всем элементам с классом `.elem`, непосредственно находящимся внутри элементов с классом `.block`, и покрасим их в красный цвет:

`<p class="block"> text <span class="elem">+</span> </p> <p class="block"> text <i><span class="elem">-</span></i> </p> <p class="block"> text <span>-</span> </p> <p> text <span class="elem">-</span> </p>` `.block > .elem { color: red; }`

:

## Смотрите также

- Контекстный селектор,
  который позволяет выбрать элемент по его родителю
- Соседний селектор,
  который позволяет выбрать элемент по его соседу
- Родственный селектор,
  который позволяет выбрать элементы после заданного
- Универсальный селектор,
  который позволяет выбрать все элементы

↑