| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 7.0 + | 5.0 + | 9.2 + | 3.0 + | 1.0 + | 1.0 + | 1.0 + |
Версії CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Опис
Споріднені селектори за своєю поведінкою схожі на сусідні селектори (запис виду 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 і варто відразу після нього.
Приклад
HTML5 CSS3 IE Cr Op Sa Fx
<!DOCTYPE htm>
<html>
<head>
<meta charset="utf-8">
<title>
селектори </title>
<style>
img {display: none; } #Switch: checked ~ img {display: block; } </style>
</head>
<body>
<form>
<input type="checkbox" id="switch">
<label for="switch">
Показати картинки </label>
<img src="images/thumb1.jpg" alt="">
<img src="images/thumb2.jpg" alt="">
<img src="images/thumb3.jpg" alt="">
</form>
</body>
</html>
В даному прикладі всі зображення спочатку приховані, але відображаються якщо поставити в поле форми галочку.