Общият комбиниращ брат (~) в 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+ | Всякакви | Всякакви |