Mutual selector
Споріднені селектори
Споріднені селектори за своєю поведінкою схожі на сусідні селектори (запис виду 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, і йде після нього.
Приклад
<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8">
<title>Selectors</title>
<base href="https://assets.ithillel.ua/images/wiki/">
<style>
img {
display: none;
}
#switch:checked ~ img {
display:block;
}
</style>
</head>
<body>
<form>
<input type="checkbox" id="switch">
<label for="switch">Show pictures</label>
<img src="gallery/thumb1.jpg" alt="">
<img src="gallery/thumb2.jpg" alt="">
<img src="gallery/thumb3.jpg" alt="">
</form>
</body>
</html>