Ogólny kombinator rodzeństwa (~) w CSS wygląda następująco:
.featured-image ~ p ( font-size: 90%; )W tym przykładzie wybierasz wszystkie akapity w artykule, które pojawiają się po wyróżnionym obrazie (element z nazwą klasy „wyróżniony obraz”) i zmniejszasz je nieco font-size.
Spowoduje to wybranie elementów na tym samym poziomie hierarchii. W tym przykładzie .featured-imagei pelementy znajdują się w tej samej hierarchii. Jeśli selektor był kontynuowany po plub wcześniej .featured-image, obowiązują normalne zasady. Więc .featured-image ~ p spannadal wybierałbym zakresy, które są potomkami wszelkich .featured-image ~ pdopasowań.
Specyfikacja selektorów poziomu 4 nazywa je „następującymi łącznikami rodzeństwa”.
Próbny
Oto kolejny przykład, który podkreśla wszystkie pelementy następujące po img:
img ~ p ( background-color: #FEF0B6; padding: 5px; )Co spowoduje:
Dziwactwa
WebKit miał kiedyś dziwactwo polegające na tym, że nie można ich było używać z pseudoselektorami. Lubić:
input:checked ~ div ( /* Wouldn't work */ )Nie znam dokładnych wersji przeglądarek, w których zostało to naprawione, ale zostało naprawione.
Więcej informacji
- Selektory dziecka i rodzeństwa
- Podobny do Adjacent Sibling Combinator.
- MDN Docs
Wsparcie przeglądarki
| Chrom | Safari | Firefox | Opera | TO ZNACZY | Android | iOS |
|---|---|---|---|---|---|---|
| Każdy | 3+ | 1+ | 9+ | 7+ | Każdy | Każdy |