Επιλογήκια κλάσης CSS

Στο CSS, οι επιλογείς κλάσης εμφανίζονται με μια τελεία:

.center {text-align: center}

Στο παραπάνω παράδειγμα, όλα τα στοιχεία HTML με την κλάση center είναι κεντραρισμένα.

Στο παρακάτω κώδικα HTML, τα στοιχεία h1 και p έχουν την κλάση center. Αυτό σημαίνει ότι και τα δύο θα ακολουθούν τους κανόνες του επιλογέα ".center".

<h1 class="center">
Αυτό το τίτλος θα είναι κεντραρισμένος
</h1>
<p class="center">
Αυτό το τμήμα κειμένου θα είναι κεντραρισμένο.
</p>

Σημείωση:Ο πρώτος χαρακτήρας του ονόματος κλάσης δεν μπορεί να είναι αριθμός! Δεν λειτουργεί στο Mozilla ή στο Firefox.

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

.fancy td {
	color: #f60;
	background: #666;
	}

Σε αυτό το παράδειγμα, οι κελύφες της τάμπλας εντός του μεγαλύτερου στοιχείου με το όνομα κλάσης fancy θα εμφανίζονται με γκρι υποβάθριο και κίτρινο κείμενο. (Το μεγαλύτερο στοιχείο με το όνομα κλάσης fancy μπορεί να είναι μια τάβλα ή ένα div)

Τα στοιχεία μπορούν επίσης να επιλεγούν με βάση την κλάση τους:

td.fancy {
	color: #f60;
	background: #666;
	}

Στο παραπάνω παράδειγμα, το στοιχείο κελιού με κλάση fancy θα είναι με γκρι παρασκήνιο και πορτοκαλί.

<td class="fancy">

Μπορείτε να προσθέσετε την κλάση fancy σε οποιοδήποτε στοιχείο πίνακα όσο πολλές φορές θέλετε. Οι κελιά που σηματοδοτούνται με fancy θα είναι με γκρι παρασκήνιο και πορτοκαλί. Τα κελιά που δεν έχουν αναγνωριστεί με την κλάση fancy δεν θα επηρεάζονται από αυτό το κανόνα. Επίσης, τα παραγράμματα με κλάση fancy δεν θα είναι με γκρι παρασκήνιο και πορτοκαλί, φυσικά, και κανένα άλλο στοιχείο που σηματοδοτείται ως fancy δεν θα επηρεάζεται από αυτόν τον κανόνα. Αυτό οφείλεται στο τρόπο που γράψαμε αυτό το κανόνα, η επίδραση περιορίζεται στις κελές που σηματοδοτούνται ως fancy (δηλαδή χρησιμοποιώντας το στοιχείο td για να επιλέξει την κλάση fancy).

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

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