Општи комбинатор брата и сестара (~) у ЦСС-у изгледа овако у употреби:
.featured-image ~ p ( font-size: 90%; )У том примеру бисте изабрали све пасусе у чланку који долазе иза истакнуте слике (елемент са називом класе „истакнута слика“) и учинили их мало мањим 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; )Што ће резултирати следећим:
Чудно
Некада је ВебКит имао необичност где их нисте могли користити са псеудо селекторима. Као:
input:checked ~ div ( /* Wouldn't work */ )Не знам тачне верзије прегледача у којима је ово исправљено, али је сада поправљено.
Више информација
- Бирачи за децу и сестре
- Слично суседном комбинатору брата и сестара.
- МДН Документи
Подршка прегледача
| Хром | Сафари | Фирефок | Опера | ИЕ | Андроид | иОС |
|---|---|---|---|---|---|---|
| Било који | 3+ | 1+ | 9+ | 7+ | Било који | Било који |