Родственный селектор в 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.