Τι είναι η εξειδίκευση στο CSS;

Η εξειδίκευση στο CSS είναι ένας μηχανισμός που καθορίζει ποιος κανόνας στυλ θα εφαρμοστεί σε ένα στοιχείο, εάν υπάρχουν πολλαπροί κανόνες που ισχύουν.

Κάθε επιλεκτής έχει το δικό του σκορ εξειδίκευσης. Ένα υψηλότερο σκορ σημαίνει υψηλότερη προτεραιότητα.

Ο υπολογισμός της εξειδίκευσης βασίζεται στον αριθμό των ακόλουθων συστατικών στον επιλεκτή (σε φθίνουσα σειρά σημασίας):

Εκατοντάδες (1000): Κανόνες με !important (έχουν την υψηλότερη προτεραιότητα, αλλά η χρήση τους δεν συνιστάται).
Εκατοντάδες (100): Στυλ σε γραμμή (γραμμένα απευθείας στο attribute style του HTML στοιχείου).
Εκατοντάδες (100): Αναγνωριστικά (selectors με id, π.χ. #το-δικό-μου-στοιχείο).
Δεκάδες (10): Κλάσεις (selectors με .κλάση), ψευδοκλάσεις (π.χ. :hover, :focus), attributes (π.χ. [type="text"]).
Μονάδες (1): Τύποι στοιχείων (ονόματα HTML tags, π.χ. div, p), ψευδοστοιχεία (π.χ. ::before, ::after).
Μηδέν (0): Καθολικός επιλεκτής (*), συνδετικά (>, +, ~), επιλεκτές γονέα (:not(), :is(), :where()) δεν προσθέτουν εξειδίκευση από μόνα τους, αλλά μπορούν να επηρεάσουν την εξειδίκευση εντός των παρενθέσεων.

Παράδειγμα υπολογισμού:

p { ... } - Εξειδίκευση: 0-0-0-1
.η-κλάση-μου { ... } - Εξειδίκευση: 0-0-1-0
#το-ιδι-μου { ... } - Εξειδίκευση: 0-1-0-0
div.η-κλάση-μου { ... } - Εξειδίκευση: 0-0-1-1
ul > li.κλάση[data-id="1"] { ... } - Εξειδίκευση: 0-0-2-2 (li, ul = 2; .κλάση, [data-id="1"] = 2)

Αν δύο κανόνες έχουν την ίδια εξειδίκευση, εφαρμόζεται αυτός που βρίσκεται πιο κάτω στο αρχείο CSS.

Παράδειγμα:

/* Αρχείο style.css */
.το-στοιχείο-μου {
  χρώμα: μπλε; /* Εξειδίκευση: 0-0-1-0 */
}

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

.το-στοιχείο-μου {
  font-weight: bold; /* Εξειδίκευση: 0-0-1-0, υπερκαλύπτει τον προηγούμενο κανόνα με την ίδια εξειδίκευση */
}

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

Η κατανόηση της εξειδίκευσης είναι σημαντική για τη συγγραφή προβλέψιμου και εύκολα συντηρήσιμου CSS. Αποφύγετε την υπερβολική πολυπλοκότητα στην εξειδίκευση και τη χρήση του !important για καλύτερη διαχείριση των στυλ.