Ο :rootεπιλογέας σάς επιτρέπει να στοχεύσετε το στοιχείο "γονέα" υψηλότερου επιπέδου στο DOM ή στο δέντρο εγγράφων. Ορίζεται στις προδιαγραφές CSS Selectors Level 3 ως «δομή ψευδο-κλάσης», που σημαίνει ότι χρησιμοποιείται για το στυλ του περιεχομένου με βάση τη σχέση του με το γονικό και αδερφικό περιεχόμενο.
Στη συντριπτική πλειοψηφία των περιπτώσεων που ενδέχεται να συναντήσετε, :rootαναφέρεται στο στοιχείο μιας ιστοσελίδας. Σε ένα έγγραφο HTML το htmlστοιχείο θα είναι πάντα ο γονέας υψηλότερου επιπέδου, επομένως η συμπεριφορά του :rootείναι προβλέψιμη. Ωστόσο, δεδομένου ότι το CSS είναι μια γλώσσα στυλ που μπορεί να χρησιμοποιηθεί με άλλες μορφές εγγράφων, όπως SVG και XML, η :rootψευδο-κατηγορία μπορεί να αναφέρεται σε διαφορετικά στοιχεία σε αυτές τις περιπτώσεις. Ανεξάρτητα από τη γλώσσα σήμανσης, :rootθα επιλέγει πάντα το κορυφαίο στοιχείο του εγγράφου στο δέντρο εγγράφων.
Στο παρακάτω παράδειγμα, ο :rootψευδο-επιλογέας χρησιμοποιείται για να δημιουργήσει ένα χρώμα φόντου πίσω από το στοιχείο. Σε αυτήν την περίπτωση, το ίδιο αποτέλεσμα θα μπορούσε να επιτευχθεί χρησιμοποιώντας τον htmlεπιλογέα στοιχείων στο CSS μας.
Σημεία ενδιαφέροντος
- Ενώ ο
:rootεπιλογέας και οhtmlεπιλογέας στοχεύουν και τα ίδια στοιχεία HTML, μπορεί να είναι χρήσιμο να γνωρίζουμε ότι:rootστην πραγματικότητα έχει υψηλότερη ειδικότητα. Οι ψευδο-επιλογείς κατηγορίας (αλλά όχι ψευδο-στοιχεία) έχουν ειδικότητα ίση με εκείνη μιας κλάσης, η οποία είναι υψηλότερη από έναν βασικό επιλογέα στοιχείων.
Υποστήριξη προγράμματος περιήγησης
| Χρώμιο | Σαφάρι | Firefox | ΛΥΡΙΚΗ ΣΚΗΝΗ | ΙΕ | Android | iOS |
|---|---|---|---|---|---|---|
| ναι | ναι | ναι | 9.5+ | IE9 + | ναι | ναι |