Τι σημαίνει ο όρος 'καταρράκτης' στο CSS;

Η ιεραρχία σε CSS καθορίζει ποιο από τα συγκρουόμενα στυλ πρέπει να εφαρμοστεί σε ένα στοιχείο. Βασίζεται σε τρία κύρια κριτήρια:

1. Σημασία: Τα στυλ με !important έχουν την υψηλότερη προτεραιότητα.
2. Ειδικότητα: Οι πιο συγκεκριμένοι επιλεκτές υπερισχύουν των λιγότερο συγκεκριμένων. Η ειδικότητα υπολογίζεται βάσει του αριθμού των ID, κλάσεων/ψευδο-κλάσεων/επιλογέων ιδιοτήτων και ετικετών/ψευδο-στοιχείων στον επιλεκτή.
3. Σειρά στον πηγαίο κώδικα: Σε περίπτωση ίσης σημασίας και ειδικότητας, εφαρμόζεται ο κανόνας που δηλώθηκε τελευταίος.

Εκτός από αυτά τα τρία, λαμβάνονται υπόψη και άλλοι παράγοντες:

• Πηγή στυλ: Στυλ χρήστη (στις ρυθμίσεις του προγράμματος περιήγησης), στυλ συγγραφέα (εξωτερικά και εσωτερικά στυλ, inline στυλ), προεπιλεγμένα στυλ του προγράμματος περιήγησης.
• Κληρονομικότητα: Ορισμένες ιδιότητες κληρονομούνται από τους γονικούς σε παιδιά στοιχεία.

Παράδειγμα ειδικότητας:

/* Ειδικότητα: 0-1-0 */
.η-κλάση μου {
  χρώμα: μπλε;
}

/* Ειδικότητα: 1-0-0 */
#το-ιδίω μου {
  χρώμα: κόκκινο;
}

Σε αυτή την περίπτωση, το στοιχείο με id το-ιδίω μου και κλάση η-κλάση μου θα έχει κόκκινο χρώμα κειμένου, επειδή το ID #το-ιδίω μου έχει μεγαλύτερη ειδικότητα από την .η-κλάση μου.