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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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