Επεκτείνοντας τη λειτουργία του adjacent sibling combinator στο CSS3
Ο adjacent sibling combinator στο CSS3 μιλάει για δύο selectors π.χ. h1
και p
όπου ο ένας διαδέχεται τον άλλο ως εξής:
h1+p{ color: red }
Στο παραπάνω παράδειγμα όταν μια παράγραφος έπεται του h1
έχει χρώμα κόκκινο. Αν δεν έπεται του h1
έχει οποιο χρώμα της έχουμε δώσει από πριν.
Αυτές τις μέρες ανακάλυψα την επέκταση της λειτουργίας των adjacent sibling selectors. Παράδειγμα:
h1+h2+p{ color: red }
Το οποίο σημαίνει ότι η παράγραφος έχει κόκκινο χρώμα μόνο όταν έπεται ενός h2
, το οποίο βρίσκεται αμέσως μετά από ένα h1
.
Δεν έχω βρει κανένα reference έως τώρα, αλλά το βλέπω να δουλεύει σωστά σε Safari, Chrome, Opera, Firefox. Μάλλον πρόκειται για valid τεχνική, καθώς μου το επιβεβαίωσε και ο Eric Meyer. Οι adjacent sibling selectors υποστηρίζονται και από Internet Explorer 7+, αλλά δεν ξέρω αν η λειτουργία που ανακάλυψα συνεχίζει να δουελεύει κι εκεί.
Αν γνωρίζετε κάποια πηγή στο θέμα ή έχετε ανακαλύψει κάτι παρόμοιο, please share στα σχόλια του post.