Ένας επιλογέας CSS επιλέγει τα στοιχεία HTML που έχετε θέλουν να στυλ.
Οι επιλογείς CSS χρησιμοποιούνται για να "βρούν" (ή να επιλέξουν) τα στοιχεία HTML που έχετε θέλουν να στυλ.
Μπορούμε να χωρίσουμε τους επιλογείς CSS σε πέντε κατηγορίες:
Απλοί επιλογείς (επιλογή στοιχείων βάσει ονόματος, αναγνωριστικού, κλάσης)
Επιλογείς συνδυασμού (επιλογή στοιχεία που βασίζονται σε μια συγκεκριμένη σχέση μεταξύ τους)
Επιλογείς ψευδο-κλάσης (επιλογή στοιχείων με βάση μια συγκεκριμένη κατάσταση)
Επιλογείς ψευδοστοιχείων (επιλογή και στυλ ένα μέρος ενός στοιχείου)
Επιλογείς χαρακτηριστικών (επιλογή στοιχείων με βάση ένα χαρακτηριστικό ή μια τιμή χαρακτηριστικού)
Αυτή η σελίδα θα εξηγήσει τους πιο βασικούς επιλογείς CSS.
Ο επιλογέας στοιχείων επιλέγει στοιχεία HTML με βάση το όνομα του στοιχείου.
Εδώ θα βρίσκονται όλα τα στοιχεία <p> στη σελίδα στοίχιση στο κέντρο, με κόκκινο χρώμα κειμένου:
p
{
text-align: center;
color: red;
}Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
Ο επιλογέας id χρησιμοποιεί το χαρακτηριστικό id ενός στοιχείου HTML για να επιλέξει ένα συγκεκριμένο στοιχείο.
Το αναγνωριστικό ενός στοιχείου είναι μοναδικό μέσα σε μια σελίδα, επομένως ο επιλογέας αναγνωριστικού είναι συνηθισμένος επιλέξτε ένα μοναδικό στοιχείο!
Για να επιλέξετε ένα στοιχείο με συγκεκριμένο αναγνωριστικό, γράψτε έναν χαρακτήρα κατακερματισμού (#), ακολουθούμενο από το αναγνωριστικό του στοιχείου.
Ο παρακάτω κανόνας CSS θα εφαρμοστεί στο στοιχείο HTML με id="para1":
#para1
{
text-align: center;
color: red;
}Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
Σημείωση: Ένα αναγνωριστικό όνομα δεν μπορεί να ξεκινά με αριθμό!
Ο επιλογέας κλάσης επιλέγει στοιχεία HTML με ένα συγκεκριμένο χαρακτηριστικό κλάσης.
Για να επιλέξετε στοιχεία με μια συγκεκριμένη κλάση, γράψτε έναν χαρακτήρα τελείας (.), ακολουθούμενο από το όνομα τάξης.
Σε αυτό το παράδειγμα όλα τα στοιχεία HTML με class="center" θα είναι κόκκινα και θα είναι στοίχιση στο κέντρο:
.center {
text-align: center;
color: red;
}Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
</body>
</html>
Μπορείτε επίσης να καθορίσετε ότι μόνο συγκεκριμένα στοιχεία HTML θα πρέπει να επηρεάζονται από μια κλάση.
Σε αυτό το παράδειγμα θα υπάρχουν μόνο <p> στοιχεία με class="center". κόκκινο και στοίχιση στο κέντρο:
p.center {
text-align: center;
color: red;
}Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
</body>
</html>
στοιχεία HTML μπορεί επίσης να αναφέρεται σε περισσότερες από μία τάξεις.
Σε αυτό το παράδειγμα, το στοιχείο <p> θα διαμορφωθεί σύμφωνα με class="center" και σε class="large":
<p class="center large">This paragraph refers to two classes.</p>Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
p.large {
font-size: 300%;
}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
<p class="center large">This paragraph will be red, center-aligned, and in a large font-size.</p>
</body>
</html>
Σημείωση: Το όνομα μιας τάξης δεν μπορεί να ξεκινά με αριθμό!
Ο γενικός επιλογέας (*) επιλέγει όλα τα HTML στοιχεία στη σελίδα.
Ο παρακάτω κανόνας CSS θα επηρεάσει κάθε στοιχείο HTML στη σελίδα:
*
{
text-align: center;
color: blue;
}Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<style>
* {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>Every element on the page will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
Ο επιλογέας ομαδοποίησης επιλέγει όλα τα στοιχεία HTML με το ίδιο στυλ ορισμοί.
Κοιτάξτε τον ακόλουθο κώδικα CSS (τα στοιχεία h1, h2 και p έχουν το ίδιο ορισμοί στυλ):
h1
{
text-align: center;
color: red;
}
h2
{
text-align: center;
color: red;
}
p
{
text-align: center;
color: red;
}Θα είναι καλύτερο να ομαδοποιήσετε τους επιλογείς, για να ελαχιστοποιήσετε τον κωδικό.
Για να ομαδοποιήσετε επιλογείς, διαχωρίστε κάθε επιλογέα με κόμμα.
Σε αυτό το παράδειγμα έχουμε ομαδοποιήσει τους επιλογείς από τον παραπάνω κώδικα:
h1, h2, p
{
text-align: center;
color: red;
}Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
</body>
</html>
Επιλογέας:
#id
Παράδειγμα:
#firstname
Παράδειγμα περιγραφής: Επιλέγει το στοιχείο με id="firstname"
Επιλογέας:
.class
Παράδειγμα:
.intro
Παράδειγμα περιγραφής: Επιλέγει όλα τα στοιχεία με class="intro"
Επιλογέας:
element.class
Παράδειγμα:
p.intro
Παράδειγμα περιγραφής: Επιλέγει μόνο <p> στοιχεία με class="intro"
Επιλογέας:
*
Παράδειγμα:
*
Παράδειγμα περιγραφής: Επιλέγει όλα τα στοιχεία
Επιλογέας:
element
Παράδειγμα:
p
Παράδειγμα περιγραφής: Επιλέγει όλα τα στοιχεία <p>
Επιλογέας:
element,element,..
Παράδειγμα:
div, p
Παράδειγμα περιγραφής: Επιλέγει όλα τα στοιχεία <div> και όλα τα στοιχεία <p>