Ο γενικός συνδυασμός αδελφών (~) στο CSS μοιάζει με αυτόν τον τρόπο σε χρήση:
.featured-image ~ p ( font-size: 90%; )Σε αυτό το παράδειγμα, θα επιλέγατε όλες τις παραγράφους σε ένα άρθρο που έρχονται μετά από την επιλεγμένη εικόνα (ένα στοιχείο με το όνομα της κατηγορίας "Featured-image") και θα τις κάνατε ελαφρώς μικρότερες font-size.
Αυτό επιλέγει στοιχεία στο ίδιο επίπεδο ιεραρχίας. Σε αυτό το παράδειγμα .featured-imageκαι τα pστοιχεία βρίσκονται στην ίδια ιεραρχία. Εάν ο επιλογέας συνέχισε μετά pή πριν .featured-image, ισχύουν οι κανονικοί κανόνες. Έτσι, .featured-image ~ p spanθα επέλεγε διαστήματα που είναι απόγονοι οποιουδήποτε .featured-image ~ pαγώνα.
Οι προδιαγραφές για τους επιλεκτικούς επιπέδου 4 αποκαλούν αυτά τα "Follow Sibling Combinators".
Διαδήλωση
Ακολουθεί ένα άλλο παράδειγμα που επισημαίνει όλα τα pστοιχεία που ακολουθούν img:
img ~ p ( background-color: #FEF0B6; padding: 5px; )Που θα έχει ως αποτέλεσμα τα εξής:
Ιδιοτροπίες
Το WebKit είχε ένα quirk όπου δεν θα μπορούσατε να τα χρησιμοποιήσετε με ψευδο επιλογείς. Αρέσει:
input:checked ~ div ( /* Wouldn't work */ )Δεν ξέρω τις ακριβείς εκδόσεις των προγραμμάτων περιήγησης όπου επιδιορθώθηκε, αλλά έχει επιδιορθωθεί τώρα.
Περισσότερες πληροφορίες
- Επιλογείς παιδιών και αδελφών
- Παρόμοιο με τον Συνδυαστή Συγγενών Αδελφών.
- Έγγραφα MDN
Υποστήριξη προγράμματος περιήγησης
| Χρώμιο | Σαφάρι | Firefox | ΛΥΡΙΚΗ ΣΚΗΝΗ | ΙΕ | Android | iOS |
|---|---|---|---|---|---|---|
| Οποιος | 3+ | 1+ | 9+ | 7+ | Οποιος | Οποιος |