Επιλογή στοιχείου με μοναδικό id στο CSS

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

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

<div id="block1">
	<p>text</p>
	<p>text</p>
</div>
<div id="block2">
	<p>text</p>
	<p>text</p>
</div>

Για να ανατρέξουμε σε ένα στοιχείο με συγκεκριμένο id, πρέπει να γράψουμε τον συμβολισμό # και το όνομα που επινοήσαμε, έτσι:

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

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

Δίνεται ο ακόλουθος κώδικας:

<div id="elem1">
	<h2>Title</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>
<div id="elem2">
	<h2>Title</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>
<div id="elem3">
	<h2>Title</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>

Βάψτε το περιεχόμενο του μπλοκ elem1 σε κόκκινο χρώμα, του μπλοκ elem2 - σε πράσινο, και του μπλοκ elem3 - σε γαλάζιο.