Επιλογείς ID CSS

Επιλογείς id

Οι επιλογείς id μπορούν να καθορίσουν συγκεκριμένα στυλ για στοιχεία HTML με συγκεκριμένο id.

Οι επιλογείς id ορίζονται με το "#".

Οι δύο επιλογείς id που ακολουθούν, ο πρώτος μπορεί να ορίσει το χρώμα του στοιχείου σε κόκκινο και ο δεύτερος σε πράσινο:

#red {color:red;}
#green {color:green;}

Στο παρακάτω κώδικα HTML, το στοιχείο p με ιδιότητα id red εμφανίζεται κόκκινο και το στοιχείο p με ιδιότητα id green εμφανίζεται πράσινο.

<p id="red">Αυτός ο παράγραφος είναι κόκκινος。</p>
<p id="green">Αυτός ο παράγραφος είναι πράσινος。</p>

Σημείωση:Η ιδιότητα id μπορεί να εμφανίζεται μόνο μια φορά σε κάθε HTML έγγραφο. Θέλετε να μάθετε τον λόγο; Παρακαλώ ανατρέξτε στο XHTML: επανασύνθεση ιστοσελίδας.

Επιλογείς id και επαυξήματος επιλογέα

Στην σύγχρονη διάταξη, οι επιλογείς id χρησιμοποιούνται συχνά για τη δημιουργία επαυξήματος επιλογέα.

#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}

Οι παραπάνω στυλ θα εφαρμόζονται μόνο στους παραγράφους που εμφανίζονται μέσα στο στοιχείο με id sidebar. Το στοιχείο αυτό είναι πιθανότατα ένα div ή μια κελίς τραπέζης, αλλά μπορεί να είναι και μια άλλη κεφαλαία ή ένα εσωτερικό στοιχείο, όπως <em></em> ή <span></span>, αλλά αυτή η χρήση είναι παράνομη, επειδή δεν μπορεί να ενσωματωθεί ένα <p> μέσα σε ένα εσωτερικό στοιχείο <span> (αν ξεχάσατε τον λόγο, παρακαλώ ανατρέξτε στο XHTML: επανασύνθεση ιστοσελίδας）。

Ένας επιλογέας, πολλές χρήσεις

Αν και τα στοιχεία που σημειώνονται ως sidebar μπορούν να εμφανίζονται μόνο μια φορά στον έγγραφο, αυτός ο επιλογέας id μπορεί να χρησιμοποιηθεί πολλές φορές ως επαυξήμας επιλογέας:

#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}
#sidebar h2 {
	font-size: 1em;
	font-weight: normal;
	font-style: italic;
	margin: 0;
	line-height: 1.5;
	text-align: right;
	}

Σε αυτό το σημείο, τα στοιχεία p μέσα στο sidebar διαφέρουν σημαντικά από τα άλλα στοιχεία p της σελίδας, ενώ τα στοιχεία h2 μέσα στο sidebar λαμβάνουν επίσης ειδική επεξεργασία, σε αντίθεση με τα άλλα στοιχεία h2 της σελίδας.

Μοναδικοί Επιλογείς

Οι επιλογείς ID μπορούν να λειτουργήσουν ανεξάρτητα ακόμα και αν δεν χρησιμοποιούνται για τη δημιουργία αναγεννητικών επιλογέων:

#sidebar {
	border: 1px dotted #000;
	padding: 10px;
	}

Σύμφωνα με αυτό το κανόνα, το στοιχείο με το id 'sidebar' θα έχει ένα πόντο σκοτεινό κουκκίδες περιθώριο 1 pixel και θα έχει 10 pixel εσωτερικό περιθώριο (padding, εσωτερικό κενό). Οι παλιές εκδόσεις των Windows/IE browsers μπορεί να αγνοήσουν αυτόν τον κανόνα, εκτός αν ορίσετε ειδικά τον στοιχείο του επιλογέα που ανήκει σε αυτόν τον επιλογέα:

div#sidebar {
	border: 1px dotted #000;
	padding: 10px;
	}

Σχετικό Περιεχόμενο

Αν χρειάζεστε πιο βαθιά γνώση για τους επιλογείς ID, διαβάστε τους προηγμένους οδηγούς του CodeW3C.com:Επεξήγηση Επιλογέων ID CSS.