A ~ B

Споріднені селектори

Споріднені селектори за своєю поведінкою схожі на сусідні селектори (запис виду E + F), але на відміну від них стильові правила застосовуються до всіх прилеглих елементів. Наприклад, для селектора h1~p стиль буде застосовуватися до всіх елементів <p>, що розташовуються після заголовка <h1>. При цьому <h1> і <p> повинні мати спільний батьківський елемент, тому якщо <p> вставити всередину <div>, то стилі застосовуватися вже не будуть.

Тут червоний колір тексту буде встановлено для всіх абзаців.

h1 ~ p { color: red; }
<h1>Заголовок</h1>
<p>Абзац 1</p>
<p>Абзац 2</p>

Тут червоний колір тексту буде встановлено для першого і третього абзаців. До другого абзацу стиль не застосовується, оскільки <h1> і <p> не мають спільного батька.

h1 ~ p { color: red; }
<h1>Заголовок</h1>
<p>Абзац 1</p>
 <div><p>Абзац 2</p></div>
<p>Абзац 3</p>

Синтаксис

E ~ F { Опис правил стилю }

Для керування стилем споріднених елементів використовується символ тільди (~), його додають між двома селекторами E і F. Пробіли навколо тільди не обов'язкові. Стиль за такого запису застосовується до елемента F у тому разі, якщо він має того самого батька, що й елемент E, і йде після нього.

Приклад

У цьому прикладі всі зображення спочатку приховані, але відображаються, якщо поставити в полі форми галочку.