CSS bendrasis brolių ir seserų kombinatorius (~) atrodo taip:
.featured-image ~ p ( font-size: 90%; )Šiame pavyzdyje jūs pasirinktumėte visas straipsnio pastraipas, kurios pateikiamos po rodomu vaizdu (elementas, kurio klasės pavadinimas yra „Featured-image“) ir padarytumėte juos šiek tiek mažesnius font-size.
Taip pasirenkami elementai tuo pačiu hierarchijos lygiu. Šiame pavyzdyje .featured-imageir pelementai yra toje pačioje hierarchijoje. Jei parinkiklis tęsė ankstesnį parba ankstesnį laiką .featured-image, galioja įprastos taisyklės. Taigi .featured-image ~ p spanvis tiek būtų atrinkti tarpai, kurie yra bet kokių .featured-image ~ prungtynių palikuonys .
4 lygio selektorių specifikacijos vadina šiuos „Sekančiųjų brolių kombinatoriais“.
Demonstracija
Štai dar vienas pavyzdys, kuris pabrėžia visus pelementus, kurie seka img:
img ~ p ( background-color: #FEF0B6; padding: 5px; )Dėl to bus:
Keistenybės
„WebKit“ anksčiau būdavo keista, kai negalėjai jų naudoti su pseudo selektoriais. Kaip:
input:checked ~ div ( /* Wouldn't work */ )Nežinau tikslių naršyklių versijų, kuriose tai buvo pataisyta, bet dabar ji yra išspręsta.
Daugiau informacijos
- Vaikų ir brolių rinkėjai
- Panašus į gretimų brolių kombinatorių.
- MDN dokumentai
Naršyklės palaikymas
| „Chrome“ | „Safari“ | „Firefox“ | Opera | T.Y | „Android“ | „iOS“ |
|---|---|---|---|---|---|---|
| Bet koks | 3+ | 1+ | 9+ | 7+ | Bet koks | Bet koks |