Загальний комбінатор братів та сестер (~) у CSS виглядає так:
.featured-image ~ p ( font-size: 90%; )У цьому прикладі ви б виділили всі абзаци у статті, які йдуть після представленого зображення (елемент із назвою класу “Featured-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
Підтримка браузера
| Chrome | Сафарі | Firefox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Будь-який | 3+ | 1+ | 9+ | 7+ | Будь-який | Будь-який |