# Родственный селектор в CSS

Родственный селектор `~` позволяет выбрать все элементы, находящиеся после заданного элемента внутри одного родителя.

## Синтаксис

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

## Пример

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

`<div> <h2>text</h2> <p> + </p> <p> + </p> <p> + </p> </div> <p> - </p>` `h2 ~ p { color: red; }`

:

## Пример

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

`<div> <p class="test"> text </p> <p> + </p> <p> + </p> </div> <p> - </p>` `.test ~ p { color: red; }`

:

## Пример

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

`<div> <p class="test"> text </p> <p class="elem"> + </p> <p> - </p> <p class="elem"> + </p> </div> <p> - </p>` `.test ~ .elem { color: red; }`

:

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

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

↑
en ru