Общий родственный комбинатор (~) в CSS при использовании выглядит так:
.featured-image ~ p ( font-size: 90%; )В этом примере вы должны выделить все абзацы в статье, которые идут после избранного изображения (элемент с именем класса «Feature-image»), и сделать их немного меньше font-size.
Это выбирает элементы на том же уровне иерархии. В этом примере .featured-imageи pэлементы находятся в одной иерархии. Если селектор продолжил работу после pили раньше .featured-image, применяются обычные правила. Так что .featured-image ~ p spanвсе равно будет выбирать промежутки, которые являются потомками любых .featured-image ~ pсовпадений.
В спецификации для селекторов 4-го уровня эти селекторы называются «комбинаторами следующих братьев и сестер».
Демо
Вот еще один пример, который выделяет все pэлементы, следующие за img:
img ~ p ( background-color: #FEF0B6; padding: 5px; )В результате получится следующее:
Причуды
У WebKit была особенность, из-за которой вы не могли использовать их с псевдоселекторами. Нравиться:
input:checked ~ div ( /* Wouldn't work */ )Я не знаю точных версий браузеров, в которых это было исправлено, но теперь это исправлено.
Дополнительная информация
- Селекторы дочерних и родственных объектов
- Аналогичен комбинатору смежных братьев и сестер.
- Документы MDN
Поддержка браузера
| Хром | Сафари | Fire Fox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Любой | 3+ | 1+ | 9+ | 7+ | Любой | Любой |