Il combinatore di pari livello generale (~) nei CSS ha questo aspetto in uso:
.featured-image ~ p ( font-size: 90%; )In questo esempio, selezioneresti tutti i paragrafi in un articolo che vengono dopo l'immagine in primo piano (un elemento con un nome di classe di "immagine in primo piano") e li ridurrai leggermente font-size.
Seleziona gli elementi allo stesso livello gerarchico. In questo esempio .featured-imagee gli pelementi sono alla stessa gerarchia. Se il selettore ha continuato oltre po prima .featured-image, si applicano le normali regole. Quindi .featured-image ~ p spanselezionerei ancora intervalli che sono discendenti di qualsiasi .featured-image ~ pcorrispondenza.
La specifica per i selettori di livello 4 chiama questi "Following Sibling Combinators".
Demo
Ecco un altro esempio che evidenzia tutti gli pelementi che seguono un img:
img ~ p ( background-color: #FEF0B6; padding: 5px; )Il che si tradurrà in quanto segue:
Stranezze
WebKit aveva una stranezza in cui non si potevano usare questi con pseudo selettori. Piace:
input:checked ~ div ( /* Wouldn't work */ )Non conosco le versioni esatte dei browser in cui è stato risolto, ma ora è stato risolto.
Maggiori informazioni
- Selettori di figli e fratelli
- Simile all'Adjacent Sibling Combinator.
- Documenti MDN
Supporto browser
| Cromo | Safari | Firefox | musica lirica | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Qualunque | 3+ | 1+ | 9+ | 7+ | Qualunque | Qualunque |