Combinatorul general de frați (~) din CSS arată astfel:
.featured-image ~ p ( font-size: 90%; )În acest exemplu, ați selecta toate paragrafele dintr-un articol care urmează după imaginea prezentată (un element cu un nume de clasă „imagine prezentată”) și le va face puțin mai mici font-size.
Aceasta selectează elemente la același nivel ierarhic. În acest exemplu .featured-imageși pelementele se află în aceeași ierarhie. Dacă selectorul a continuat după trecut psau înainte .featured-image, se aplică regulile normale. Deci, .featured-image ~ p spantotuși, ar selecta întinderile care sunt descendente ale oricăror .featured-image ~ ppotriviri.
Specificațiile pentru selectoarele de nivel 4 denumesc aceste „Următoarele combinații de frate”.
Demo
Iată un alt exemplu care evidențiază toate pelementele care urmează img:
img ~ p ( background-color: #FEF0B6; padding: 5px; )Ceea ce va avea ca rezultat următoarele:
Ciudățenii
WebKit obișnuia să aibă o ciudățenie în care nu le puteai folosi cu pseudo selectoare. Ca:
input:checked ~ div ( /* Wouldn't work */ )Nu știu versiunile exacte ale browserelor în care a fost remediat acest lucru, dar este remediat acum.
Mai multe informatii
- Selectoare pentru copii și frați
- Asemănător cu combinatorul de frați adiacent.
- Documente MDN
Suport pentru browser
| Crom | Safari | Firefox | Operă | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Orice | 3+ | 1+ | 9+ | 7+ | Orice | Orice |