Споріднений селектор у 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.