Επεκτείνοντας τη λειτουργία του 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.

porcupine letter

Το newsletter που έρχεται κάθε 2η Παρασκευή και κάνει τα Σαββατοκύριακα λίγο μεγαλύτερα.

Καλύτερες υπηρεσίες & προϊόντα για το Web

Μαζί σας δημιουργούμε συνεργασίες που βγάζουν στο Διαδίκτυο το καλύτερο σας πρόσωπο. Το πετυχαίνουμε σχεδιάζοντας websites, apps και ψηφιακές υπηρεσίες. Σταθερά, με συνέπεια, με καλή διάθεση. Και κυρίως με αποτελέσματα.

Επικοινωνία: [email protected]