CSS selector p ~ ul


Селектор element1~element2 обирає всі вказані елементи element2, які розташовані після елемнта element1.

Обидва елементи мають мати одного батька.

автор: NagarD

Порада

Цей селектор схожий на селектор element1+element2, але на відмінну від нього обираї всіх наступних братів, а не тільки одного наступного.

автор: NagarD

Синтаксис

element ~ element {


    css declarations;


}

Переглядачі

Підтримка: стаціонарні переглядачі
Переглядач Google Chrome Mozilla Firefox Apple Safari Opera Microsoft Internet Explorer
sibling 4.0 3.5 3.2 9.6 7.0

Мобільних переглядачів ще не додано.

Приклади

+ запропонувати свій приклад у пісочниці

Тильда обирає всіх наступних братів: червоніють обидва списки після абзацу — навіть через div, — а список перед абзацом лишається без змін.

HTML

<ul><li>Список перед абзацом — без змін.</li></ul>
<p>Абзац.</p>
<ul><li>Список після абзацу — червоний.</li></ul>
<div>Між ними може стояти будь-що.</div>
<ul><li>І цей червоний: ~ бачить усіх наступних братів.</li></ul>

CSS

p ~ ul {
    background: #ff0000;
}
автор: NagarD

Коментарі

Коментарів ще немає — будьте першим!

Відповідь для

Увійдіть — коментар з'явиться одразу, без капчі й очікування перевірки.

Пропозиція правки

Ваша версія — : після перевірки замінить чинну. Нова порада чи нотатка — з'явиться на сторінці після перевірки.

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.

Ваша версія секції «»: після перевірки замінить чинну.

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.

Ваша версія опису «»: після перевірки замінить чинну.

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.

Зворотний зв'язок
Вхід