Κλάσεις στοιχείων στο CSS

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

Για να αντιστοιχίσετε μια ετικέτα σε μια κλάση, πρέπει να γράψετε στην ετικέτα το χαρακτηριστικό class, και μέσα σε αυτό - το όνομα της κλάσης που εφηύρατε, που αποτελείται από γράμματα, ψηφία, σύμβολα υπογράμμισης και παύλας.

Ας δούμε ένα παράδειγμα. Ας φτιάξουμε παραγράφους με δύο τύπους κλάσεων - eee και zzz:

<p class="eee">
	paragraph with class eee
</p>
<p class="eee">
	paragraph with class eee
</p>
<p class="zzz">
	paragraph with class zzz
</p>
<p class="zzz">
	paragraph with class zzz
</p>

Ας προσπελάσουμε τώρα στο CSS τις παραγράφους με τις διαφορετικές κλάσεις και ας τους ορίσουμε μερικά στυλ. Για παράδειγμα, ας χρωματίσουμε τις παραγράφους με κλάση zzz με κόκκινο χρώμα, και τις παραγράφους με κλάση eee - με πράσινο.

Για να γίνει αυτό, στο αρχείο CSS πρέπει να προσπελάσουμε τις κλάσεις μας. Η προσπέλαση έχει την ακόλουθη σύνταξη: πρώτα έρχεται το σύμβολο τελεία, και μετά το όνομα της κλάσης που εφηύραμε. Δηλαδή, για να προσπελάσουμε την κλάση eee πρέπει να γράψουμε .eee, και για την κλάση zzz - να γράψουμε .zzz.

Λοιπόν, ας κάνουμε όσα περιγράψαμε. Ας προσθέσουμε στο HTML μας και CSS στυλ για τις κλάσεις που εισαγάγαμε:

.eee {
	color: green;
}
.zzz {
	color: red;
}

Αν εκτελέσουμε τον κώδικά μας, το αποτέλεσμα θα είναι το ακόλουθο:

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

<ul>
	<li class="odd">text</li>
	<li class="eve">text</li>
	<li class="odd">text</li>
	<li class="eve">text</li>
	<li class="odd">text</li>
	<li class="eve">text</li>
</ul>

Χρωματίστε τα στοιχεία με κλάση odd με κόκκινο χρώμα και τα στοιχεία με κλάση eve - με πράσινο χρώμα.

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

<h2 class="eee">Title</h2>
<p class="eee">
	paragraph
</p>
<p class="eee">
	paragraph
</p>
<p>
	paragraph without class
</p>

<ul class="eee">
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

Χρωματίστε όλα τα στοιχεία με κλάση eee με κόκκινο χρώμα.

Εξηγήστε γιατί στο προηγούμενο πρόβλημα χρωματίζονται με κόκκινο οι ετικέτες li, αν και η κλάση που ορίζει το χρώμα, έχει οριστεί στην ετικέτα ul.