Den allmänna syskonkombinator (~) i CSS ser ut så här vid användning:
.featured-image ~ p ( font-size: 90%; )I det exemplet skulle du välja alla stycken i en artikel som kommer efter den presenterade bilden (ett element med klassnamnet "featured-image") och göra dem till något mindre font-size.
Detta väljer element på samma hierarkinivå. I detta exempel .featured-imageoch pelementen är i samma hierarki. Om väljaren fortsatte förbi peller innan gäller .featured-imagede normala reglerna. Så .featured-image ~ p spanfortfarande skulle välja spann som är ättlingar till vad som helst som .featured-image ~ pmatchar.
Specifikationen för väljare nivå 4 kallar dessa "Följande syskonkombinatorer".
Demo
Här är ett annat exempel som belyser alla pelement som följer ett img:
img ~ p ( background-color: #FEF0B6; padding: 5px; )Vilket kommer att resultera i följande:
Quirks
WebKit brukade ha en karaktär där du inte kunde använda dessa med pseudoväljare. Tycka om:
input:checked ~ div ( /* Wouldn't work */ )Jag vet inte exakta versioner av webbläsare där detta fixades, men det är fixat nu.
Mer information
- Barn- och syskonväljare
- Liknar Adjacent Sibling Combinator.
- MDN-dokument
Webbläsarstöd
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Några | 3+ | 1+ | 9+ | 7+ | Några | Några |