Τι γνωρίζετε για τη συγκεκριμενικότητα των CSS…

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

Η συγκεκριμενοποίηση είναι μια αριθμητική αξιολόγηση που αποτελείται από τέσσερις κατηγορίες (A, B, C, D), γραμμένη ως 0,0,0,0. Όσο μεγαλύτερος είναι ο αριθμός, τόσο μεγαλύτερη είναι η συγκεκριμενοποίηση.

Κατηγορίες:

A (εντός γραμμής στυλ): Στυλ που ορίζονται μέσω του χαρακτηριστικού style στο HTML στοιχείο. Έχουν την υψηλότερη συγκεκριμενοποίηση (π.χ., 1,0,0,0).
B (ID): Επιλεκτές με ID (π.χ., #το-δικό-mou). Αυξάνουν τον δεύτερο αριθμό (π.χ., 0,1,0,0).
C (Κλάση, Αρχείο, Pseudo-κλάση): Επιλεκτές με κλάση (π.χ., .η-κλάση-mou), αρχείο (π.χ., [type="text"]), pseudo-κλάση (π.χ., :hover, :first-child). Αυξάνουν τον τρίτο αριθμό (π.χ., 0,0,1,0).
D (Στοιχείο, Pseudo-στοιχείο): Επιλεκτές με ετικέτα HTML (π.χ., div, p) και pseudo-στοιχεία (π.χ., ::before, ::after). Αυξάνουν τον τέταρτο αριθμό (π.χ., 0,0,0,1).

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

p - 0,0,0,1
.η-κλάση-mou - 0,0,1,0
#to-δικό-mou - 0,1,0,0
div p - 0,0,0,2 (άθροισμα των συγκεκριμενοτήτων των δύο στοιχείων)
#to-δικό-mou .η-κλάση-mou - 0,1,1,0 (άθροισμα ID και κλάσης)
div#to-δικό-mou.η-κλάση-mou:hover - 0,1,2,1 (άθροισμα στοιχείου, ID, κλάσης και pseudo-κλάσης)

Κανόνες:

Η συγκεκριμενοποίηση του inline style είναι πάντα μεγαλύτερη από οποιονδήποτε συνδυασμό άλλων επιλεκτών, εκτός από κανόνες με τη σημαία !important.
Οι κανόνες με τη σημαία !important έχουν την υψηλότερη προτεραιότητα, υπερβαίνοντας ακόμη και το inline style. Η χρήση του !important δεν συνιστάται λόγω δυσκολίας στην αποσφαλμάτωση.
Σε περίπτωση ίσης συγκεκριμενοποίησης, εφαρμόζεται ο κανόνας που δηλώθηκε τελευταίος στο CSS αρχείο.
Ο καθολικός επιλεκτής (*) και το :where() έχουν συγκεκριμενοποίηση 0,0,0,0 και δεν αυξάνουν τη συνολική συγκεκριμενοποίηση.

/*
  Συγκεκριμενοποίηση: 0,0,0,1
  Θα εφαρμοστεί αν δεν υπάρχουν πιο συγκεκριμένοι κανόνες
*/
p {
  color: blue;
}

/*
  Συγκεκριμενοποίηση: 0,0,1,0
  Θα υπερισχύσει του κανόνα για το στοιχείο p
*/
.text {
  color: green;
}

/*
  Συγκεκριμενοποίηση: 0,1,0,0
  Θα υπερισχύσει του κανόνα για την κλάση .text
*/
#κύριος-κείμενο {
  color: red;
}

/*
  Συγκεκριμενοποίηση: 1,0,0,0
  Θα εφαρμοστεί αν το στοιχείο έχει το χαρακτηριστικό style="color: purple;"
*/
/* <p style="color: purple;">Κείμενο</p> */

/*
  Πολύ υψηλή συγκεκριμενοποίηση, θα υπερισχύσει όλων
  Δεν συνιστάται η χρήση εκτός από απόλυτη ανάγκη
*/
.override-text {
  color: black !important;
}

Τι γνωρίζετε για τη συγκεκριμενικότητα των CSS επιλεκτών;