☰

Στιλ και προτεραιότητες

Όταν σε ένα στοιχείο δηλωθούν ιδιότητες με διαφορετικές τιμές, τότε τίθεται το ερώτημα ποια ιδιότητα έχει προτεραιότητα.

Ο βασικός κανόνας είναι αυτός που ορίζεται από τον μηχανισμό cascading. Σύμφωνα με αυτόν προτεραιότητα έχει η ιδιότητα που καταχωρείται τελευταία (διαβάζοντας τα στιλ από πάνω προς τα κάτω). Επίσης μεγαλύτερη προτεραιότητα έχει το στιλ που ορίζεται μέσα στην ετικέτα με την ιδιότητα style.

Εκτός από τη σειρά (source order) υπάρχουν ακόμα δυο παράγοντες που επηρεάζουν το τελικό αποτέλεσμα. Αυτοί είναι: Importance και Specificity.

Συνολικά έχουμε:

Source order (σειρά)
Importance (σπουδαιότητα)
Specificity (προσδιορισιμότητα ή ιδιαιτερότητα)

Source order (σειρά)

Δείτε παράδειγμα: Source order (σειρά)

<!DOCTYPE html>
<html>
<head>
	<title>cascading source order</title>
	<meta charset="utf-8" />
	<style type="text/css">
		p {
			color: red;
		}

		p {
			color: green;
		}
	</style>
</head>
<body>
	<p>This is green (η πιο τελευταία δήλωση είναι η green)</p>
	<p style = "color:blue">This is blue (η δήλωση στην ετικέτα έχει προτεραιότητα)</p>
</body>
</html>

Importance (σπουδαιότητα)

Η σπουδαιότητα δηλώνεται στην τιμή μιας ιδιότητας με τη λέξη !important και υπερισχύει του παράγοντα Source order (σειρά).

Δείτε παράδειγμα: Importance order

<!DOCTYPE html>
<html>
<head>
	<title>cascading importance</title>
	<meta charset="utf-8" />
	<style type="text/css">
		p {
			color: red !important;
		}

		p {
			color: green;
		}
	</style>
</head>
<body>
	<p>This is red (η πιο τελευταία δήλωση είναι η green αλλά υπερισχύει το red λόγω !important)</p>
	<p style = "color:blue">This is red (η δήλωση !important υπερισχύει και της style)</p>	
</body>
</html>

Specificity (προσδιορισιμότητα)

Ο παράγων Specificity ορίζει πόσο γενικός ή ειδικός είναι ο επιλογέας (selector). Όσο πιο ειδικός ή πιο συγκεκριμένος είναι ο επιλογέας τόσο μεγαλύτερη προτεραιότητα έχει.

Για παράδειγμα ο επιλογέας

p { ... }

είναι πολύ γενικός γιατί αναφέρεται σε όλα τα p του εγγράφου. Αντίθετα ο επιλογέας

div > p { ... }

έχει μεγαλύτερη προτεραιότητα ακόμα και αν βρίσκεται πιο πάνω στη σειρά διότι αναφέρεται σε κάτι πιο συγκεκριμένο που είναι τα p τα οποία είναι άμεσα παιδιά των div.

Σε γενικές γραμμές μεγαλύτερο specificity έχουν οι επιλογείς με id. Για παράδειγμα:

#main {...}

μετά οι κλάσεις, για παράδειγμα:

.content {...}

και τέλος οι ετικέτες όπως για παράδειγμα

p {...}

Δείτε παράδειγμα: Specificity (προσδιορισιμότητα)

<!DOCTYPE html>
<html>
<head>
	<title>cascading specificity</title>
	<meta charset="utf-8" />
	<style type="text/css">
		div > p {
			color: red;
		}

		p {
			color: green;
		}
	</style>
</head>
<body>
	<p>This is green (καλύπτεται από το γενικό p)</p>
	<div>
		<p>This is red (καλύπτεται από το ειδικό p με το p άμεσο παιδί του div)</p>
	</div>
</body>
</html>