Κανόνες Ειδικότητας στο CSS

Στο προηγούμενο παράδειγμα, και οι δύο επιλογείς ήταν ίδιοι και είχαν την ίδια προτεραιότητα. Αυτό σημαίνει ότι κέρδιζε η ιδιότητα που ήταν γραμμένη πιο κάτω.

Υπάρχουν επίσης καταστάσεις όπου ένα στοιχείο της σελίδας αντιστοιχεί σε πολλούς επιλογείς. Σε αυτή την περίπτωση, σε περίπτωση σύγκρουσης ιδιοτήτων, θα κερδίσει ο πιο ειδικός, δηλαδή ο πιο ακριβής επιλογέας. Ας εξετάσουμε τους κανόνες ειδικότητας.

Κανόνας πρώτος

Η κλάση κερδίζει πάντα τον επιλογέα ετικέτας:

html<p class="text">κείμενο</p>

cssp {
  color: red;
}
.text {
  color: green; /* θα εφαρμοστεί αυτό το χρώμα */
}

Результат:

Κανόνας δεύτερος

Το αναγνωριστικό κερδίζει πάντα την κλάση:

html<p id="elem" class="text">κείμενο</p>

css.text {
  color: red;
}
#elem {
  color: green; /* θα εφαρμοστεί αυτό το χρώμα */
}

Результат:

Κανόνας τρίτος

Υπό ίσες συνθήκες, κερδίζει αυτός ο επιλογέας που έχει περισσότερα μέρη. Για παράδειγμα, αν έχουμε δύο επιλογείς ετικετών, θα κερδίσει αυτός που έχει περισσότερες ετικέτες:

html<div>
  <p>κείμενο</p>
</div>

cssp {
  color: red;
}
div p {
  color: green; /* θα εφαρμοστεί αυτό το χρώμα */
}

Результат:

Αν υπάρχουν δύο επιλογείς κλάσεων, θα κερδίσει αυτός στον οποίο έχουν καθοριστεί περισσότερες κλάσεις (αν υπάρχουν επιλογείς ετικετών, δεν επηρεάζουν):

html<div class="block">
  <p class="text">κείμενο</p>
</div>

css.text {
  color: red;
}
.block .text {
  color: green; /* θα εφαρμοστεί αυτό το χρώμα */
}

Результат: