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>
В даному прикладі всі зображення спочатку приховані, але відображаються якщо поставити в поле форми галочку.