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

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

## Пример

Давайте обратимся ко всем тегам `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; }`

:

## Практические задачи

Дан код:

`<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li id="elem">5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul>`

Напишите селектор, который выберет все элементы, находящийся сразу после элемента `#elem`.

←→
↑