Οι επιλογείς (selectors) στη γλώσσα CSS χρησιμοποιούνται για να επιλέξουν και να ορίσουν τα στοιχεία στα οποία θα εφαρμοστούν οι κανόνες στυλ. Οι επιλογείς μας επιτρέπουν να επιλέξουμε συγκεκριμένα στοιχεία HTML, κλάσεις, αναγνωριστικά ή ακόμη και σύνθετους συνδυασμούς αυτών.
Ένας επιλογέας μπορεί να είναι το όνομα ενός στοιχείου HTML, όπως π.χ. h1 για την επιλογή όλων των ετικετών <h1>. Επίσης, μπορούμε να χρησιμοποιήσουμε αναγνωριστικά (IDs) και κλάσεις για να επιλέξουμε συγκεκριμένα στοιχεία με βάση τα αντίστοιχα χαρακτηριστικά τους.
Παράδειγματικά, ο επιλογέας #myElement θα επιλέξει το στοιχείο με το αναγνωριστικό “myElement”, ενώ ο επιλογέας .myClass θα επιλέξει όλα τα στοιχεία με την κλάση “myClass”.
Επιπλέον, μπορούμε να συνδυάσουμε επιλογείς για να προσδιορίσουμε πιο συγκεκριμένα στοιχεία. Για παράδειγμα, ο επιλογέας div.container θα επιλέξει όλα τα στοιχεία <div> που βρίσκονται μέσα σε στοιχεία με την κλάση “container”.
Οι επιλογείς είναι ένα σημαντικό μέρος της CSS, καθώς μας επιτρέπουν να εφαρμόσουμε συγκεκριμένα στυλ σε συγκεκριμένα στοιχεία, προσφέροντας μεγάλη ευελιξία και δυνατότητα προσαρμογής των ιστοσελίδων μας.
Οι επιλογείς της CSS χρησιμοποιούνται για να επιλέξουν τα στοιχεία HTML που επιθυμούμε να εφαρμόσουμε στυλ.
Οι επιλογείς CSS χωρίζονται σε πέντε βασικές κατηγορίες:
- Απλοί επιλογείς: Χρησιμοποιούνται για να επιλέξουν στοιχεία με βάση το όνομά τους, το αναγνωριστικό ή την κλάση τους. Για παράδειγμα, μπορούμε να επιλέξουμε όλα τα στοιχεία
<h1>ή ένα στοιχείο με συγκεκριμένη κλάση όπως<div class="my-class">. - Συνδυαστικοί επιλογείς: Χρησιμοποιούνται για να επιλέξουν στοιχεία με βάση τη σχέση μεταξύ τους. Μπορούμε να επιλέξουμε για παράδειγμα τα παιδιά ενός στοιχείου, τα αδέλφια του, ή στοιχεία που βρίσκονται μέσα σε ένα άλλο στοιχείο.
- Επιλογείς ψευδο-κλάσης: Χρησιμοποιούνται για να επιλέξουν στοιχεία με βάση μια συγκεκριμένη κατάσταση. Παράδειγμα αυτού είναι ο επιλογέας
:hoverπου επιλέγει ένα στοιχείο όταν το ποντίκι το “κάνει hover” πάνω του. - Επιλογείς ψευδο-στοιχείων: Χρησιμοποιούνται για να επιλέξουν και να διαμορφώσουν μέρος ενός στοιχείου. Μπορούμε να επιλέξουμε το πρώτο παιδί ενός στοιχείου, το τελευταίο, ή ακόμα και κάθε άρτιο ή περιττό παιδί.
- Επιλογείς γνωρισμάτων: Χρησιμοποιούνται για να επιλέξουν στοιχεία με βάση ένα γνώρισμα ή την τιμή ενός γνωρίσματος. Μπορούμε να επιλέξουμε για παράδειγμα όλα τα στοιχεία με το γνώρισμα
type="text"ή στοιχεία με συγκεκριμένη τιμή γνωρίσματος όπως<a href="https://www.example.com">.
Ο επιλογέας στοιχείου της CSS χρησιμοποιείται για να επιλέξει στοιχεία HTML βάσει του ονόματος τους. Αυτός ο επιλογέας επιτρέπει να διαμορφώσουμε το στυλ των επιλεγμένων στοιχείων με τη χρήση CSS κανόνων. Για παράδειγμα, μπορούμε να επιλέξουμε όλα τα στοιχεία <h1> στο έγγραφο HTML και να τους εφαρμόσουμε ένα συγκεκριμένο στυλ.
Παράδειγμα:
Ας υποθέσουμε ότι έχουμε το παρακάτω HTML κώδικα:
<!DOCTYPE html>
<html>
<head>
<title>Παράδειγμα Επιλογέα Στοιχείου</title>
<style>
h1 {
color: blue; /* Ορίζει το χρώμα του επιλεγμένου στοιχείου h1 σε μπλε */
}
</style>
</head>
<body>
<h1>Καλώς ήρθατε!</h1> <!-- Το επιλεγμένο στοιχείο h1 με το κείμενο "Καλώς ήρθατε!" -->
<p>Αυτή είναι μια παράδειγμα επιλογέα στοιχείου.</p> <!-- Το απλό στοιχείο p με το κείμενο "Αυτή είναι μια παράδειγμα επιλογέα στοιχείου." -->
</body>
</html>
Στο παραπάνω παράδειγμα, ο επιλογέας στοιχείου h1 χρησιμοποιείται για να επιλέξει όλα τα στοιχεία <h1> στο έγγραφο HTML. Στο εσωτερικό του κανόνα CSS, καθορίζουμε ότι το χρώμα των επιλεγμένων στοιχείων <h1> θα είναι μπλε (blue). Έτσι, το κείμενο “Καλώς ήρθατε!” που βρίσκεται μέσα σε ένα στοιχείο <h1> θα εμφανιστεί με μπλε χρώμα.
Αυτό είναι ένα αναλυτικό παράδειγμα που δείχνει πώς ο επιλογέας στοιχείου CSS επιλέγει τα στοιχεία HTML με βάση το όνομά τους και πώς μπορούμε να τους εφαρμόσουμε ένα στυλ.
Μπορείτε να χρησιμοποιήσετε οποιοδήποτε όνομα στοιχείου HTML (π.χ. h1, div, span) ως επιλογέα στοιχείου για να επιλέξετε και να εφαρμόσετε στυλ σε αυτά τα στοιχεία.
[adinserter block=”2″]
Ο επιλογέας αναγνωριστικού (id) στο CSS χρησιμοποιεί το μοναδικό αναγνωριστικό ενός στοιχείου HTML για να το επιλέξει.
Κάθε στοιχείο σε μια σελίδα έχει ένα μοναδικό αναγνωριστικό (id), το οποίο το καθορίζουμε με το γνώρισμα “id” στο HTML. Ο επιλογέας αναγνωριστικού χρησιμοποιείται για να επιλέξει ακριβώς αυτό το μοναδικό στοιχείο.
Για να επιλέξουμε ένα στοιχείο με ένα συγκεκριμένο αναγνωριστικό, προσθέτουμε έναν αστερίσκο (#) πριν από το αναγνωριστικό στον επιλογέα CSS. Για παράδειγμα, για να επιλέξουμε ένα στοιχείο με αναγνωριστικό “my-element”, θα χρησιμοποιήσουμε τον επιλογέα “#my-element”.
Ας υποθέσουμε ότι έχουμε το παρακάτω HTML κώδικα:
<div id="my-element"> <h1>Hello, World!</h1> <p>This is a paragraph inside the element with the id "my-element".</p> </div>
Για να επιλέξουμε το στοιχείο με αναγνωριστικό “my-element” και να εφαρμόσουμε στυλ CSS, μπορούμε να χρησιμοποιήσουμε τον επιλογέα αναγνωριστικού (#). Για παράδειγμα:
#my-element {
background-color: blue;
color: white;
}
Στο παραπάνω παράδειγμα, εφαρμόζουμε μια μπλε χροιά φόντου και λευκό χρώμα κειμένου στο στοιχείο με αναγνωριστικό “my-element”. Ο επιλογέας “#my-element” επιλέγει ακριβώς αυτό το μοναδικό στοιχείο για να εφαρμοστούν οι συγκεκριμένες δηλώσεις CSS.
Έτσι, το στοιχείο με αναγνωριστικό “my-element” θα έχει μπλε φόντο και λευκό κείμενο όπως ορίσαμε στον κανόνα CSS.
Ο επιλογέας κλάσης στη CSS χρησιμοποιείται για να επιλέξει στοιχεία HTML με ένα συγκεκριμένο γνώρισμα κλάσης.
Για να επιλέξετε στοιχεία με μια συγκεκριμένη κλάση, προσθέστε τον χαρακτήρα τελεία (.) ακολουθούμενο από το όνομα της κλάσης.
Παρακάτω παραθέτω ένα αναλυτικό παράδειγμα χρήσης επιλογέα κλάσης στη CSS:
HTML:
<div class="container"> <h1 class="title">Καλώς ήρθατε!</h1> <p class="description">Αυτή είναι μια δοκιμαστική ιστοσελίδα.</p> </div>
CSS:
.container {
background-color: #f2f2f2;
padding: 20px;
}
.title {
color: #333;
font-size: 24px;
}
.description {
color: #666;
font-size: 16px;
}
Στο παραπάνω παράδειγμα, έχουμε έναν επιλογέα κλάσης που επιλέγει τα στοιχεία με την κλάση “container”. Οι δηλώσεις CSS εφαρμόζονται σε αυτά τα στοιχεία, όπως η οπίσθια εικόνα και το περιθώριο. Επίσης, έχουμε επιλογείς κλάσης με τα ονόματα “title” και “description” που επιλέγουν τον τίτλο και την περιγραφή αντίστοιχα και τους δίνουν χρώμα και μέγεθος γραμματοσειράς.
Με αυτόν τον τρόπο, μπορούμε να επιλέξουμε και να διαμορφώσουμε στοιχεία HTML με βάση την κλάση τους, προσδίδοντας τους συγκεκριμένα στυλ μέσω των δηλώσεων CSS.
Μπορείτε επίσης να ορίσετε ότι μόνο συγκεκριμένα στοιχεία HTML θα επηρεαστούν από μια κλάση, συνδυάζοντας τον επιλογέα κλάσης με τον επιλογέα τύπου στοιχείου.
Ας υποθέσουμε ότι έχουμε τα ακόλουθα στοιχεία HTML:
<div class="container"> <h1>Κεφαλίδα</h1> <p>Αυτό είναι ένα κείμενο παραδείγματος.</p> <p class="highlight">Αυτή η παράγραφος έχει την κλάση "highlight".</p> </div>
Για να επηρεάσουμε μόνο τα στοιχεία που έχουν την κλάση “highlight”, μπορούμε να χρησιμοποιήσουμε τον επιλογέα κλάσης (.) σε συνδυασμό με τον επιλογέα τύπου στοιχείου. Ας δούμε ένα παράδειγμα CSS:
p.highlight {
color: red;
font-weight: bold;
}
Σε αυτό το παράδειγμα, ο κανόνας CSS προσδιορίζει ότι μόνο οι παράγραφοι (p) που έχουν την κλάση “highlight” θα επηρεαστούν. Οι συγκεκριμένες παράγραφοι θα έχουν κόκκινο χρώμα και θα είναι έντονα (bold).
Έτσι, η παράγραφος με την κλάση “highlight” θα εμφανιστεί με διαφορετικό στυλ από τις υπόλοιπες παραγράφους του κειμένου.
Με τον συνδυασμό του επιλογέα κλάσης με τον επιλογέα τύπου στοιχείου, μπορείτε να επιλέξετε μόνο συγκεκριμένα στοιχεία με μια καθορισμένη κλάση και να τους εφαρμόσετε συγκεκριμένα στυλ.
Μπορούμε επίσης να παραθέσουμε περισσότερες από μία κλάσεις σε ένα στοιχείο HTML.
Για να εφαρμόσετε πολλαπλές κλάσεις σε ένα στοιχείο, απλά χρησιμοποιήστε το κενό διάστημα για να τις διαχωρίσετε.
Ας υποθέσουμε ότι έχουμε τα εξής στοιχεία HTML:
<div class="box red"></div> <div class="box large"></div> <div class="box round"></div>
Στο παραπάνω παράδειγμα, κάθε στοιχείο <div> έχει ανατεθεί περισσότερες από μία κλάσεις. Η πρώτη κλάση είναι “box”, η δεύτερη κλάση είναι μία περιγραφική κλάση που προσδιορίζει την εμφάνιση ή το μέγεθος του στοιχείου.
Στο παράδειγμα, το πρώτο στοιχείο έχει τις κλάσεις “box” και “red”, που μπορούν να χρησιμοποιηθούν για να ορίσουν ένα κουτί με κόκκινο χρώμα. Το δεύτερο στοιχείο έχει τις κλάσεις “box” και “large”, που μπορούν να χρησιμοποιηθούν για να ορίσουν ένα μεγάλο κουτί. Το τρίτο στοιχείο έχει τις κλάσεις “box” και “round”, που μπορούν να χρησιμοποιηθούν για να ορίσουν ένα κυκλικό κουτί.
Με τη χρήση πολλαπλών κλάσεων, μπορούμε να συνδυάσουμε τις δυνατότητες και τα χαρακτηριστικά που κάθε κλάση παρέχει, προσαρμόζοντας έτσι το στυλ ή τη συμπεριφορά των στοιχείων HTML.
[adinserter block=”3″]
Με τη δυνατότητα να αναφέρονται σε περισσότερες από μία κλάσεις, μπορείτε να οργανώσετε τον κώδικα σας και να επαναχρησιμοποιείτε στυλ που έχουν οριστεί για κάθε κλάση ξεχωριστά.
Ο επιλογέας Universal στη CSS επιλέγει όλα τα στοιχεία HTML που υπάρχουν σε μια σελίδα. Ο επιλογέας Universal συμβολίζεται με τον χαρακτήρα αστερίσκο (*). Χρησιμοποιώντας αυτόν τον επιλογέα, μπορούμε να εφαρμόσουμε δηλώσεις CSS σε όλα τα στοιχεία της σελίδας, περιλαμβάνοντας τον ίδιο τον HTML, τις ετικέτες και τα περιεχόμενα τους. Αυτό μας επιτρέπει να προσδιορίσουμε γενικούς κανόνες στυλ που θα ισχύουν για όλα τα στοιχεία της σελίδας, όπως το χρώμα του κειμένου, τη γραμματοσειρά, τα περιθώρια και πολλά άλλα. Ωστόσο, πρέπει να προσέχουμε καθώς ο επιλογέας Universal επηρεάζει όλα τα στοιχεία και μπορεί να οδηγήσει σε ευρεία επιρροή στην εμφάνιση της ιστοσελίδας.
Ας υποθέσουμε ότι έχουμε την ακόλουθη HTML σελίδα:
<!DOCTYPE html>
<html>
<head>
<title>Παράδειγμα επιλογέα Universal</title>
<style>
* {
color: red;
font-size: 20px;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<h1>Καλώς ορίσατε στο παράδειγμα επιλογέα Universal!</h1>
<p>Αυτός ο επιλογέας εφαρμόζει στυλ σε όλα τα στοιχεία της σελίδας.</p>
<ul>
<li>Στοιχείο 1</li>
<li>Στοιχείο 2</li>
<li>Στοιχείο 3</li>
</ul>
</body>
</html>
Στο παραπάνω παράδειγμα, χρησιμοποιούμε τον επιλογέα Universal (*) για να εφαρμόσουμε κοινά στυλ σε όλα τα στοιχεία της σελίδας. Στο στυλ που ορίζουμε στο <style> μπλοκ, έχουμε ορίσει τα εξής:
* {
color: red;
font-size: 20px;
margin: 0;
padding: 0;
}
Αυτό σημαίνει ότι όλα τα στοιχεία της σελίδας θα έχουν κόκκινο χρώμα κειμένου, μέγεθος γραμματοσειράς 20px και μηδενικά περιθώρια και περιθώρια πλαισίου. Αυτό εφαρμόζεται σε όλα τα στοιχεία, συμπεριλαμβανομένων των τίτλων h1, των παραγράφων p και των στοιχείων λίστας ul και li.
Έτσι, όλα τα στοιχεία της σελίδας θα έχουν κόκκινο κείμενο, μέγεθος γραμματοσειράς 20px και θα μηδενίζονται τα περιθώριά τους. Αυτό δείχνει την επίδραση του επιλογέα Universal στην εφαρμογή στυλ σε όλα τα στοιχεία της σελίδας.
Με τη χρήση του επιλογέα ομαδοποίησης στη CSS, μπορείτε να επιλέξετε όλα τα στοιχεία HTML που έχουν καθορισμένες ίδιες μορφοποιήσεις.
Παρακάτω παραθέτω ένα παράδειγμα κώδικα CSS, όπου τα στοιχεία h1, h2 και p έχουν τις ίδιες καθορισμένες μορφοποιήσεις:
h1, h2, p {
color: #333;
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
}
Στο παραπάνω παράδειγμα, ο επιλογέας ομαδοποίησης με τη χρήση του κόμματος (,) επιλέγει όλα τα στοιχεία h1, h2 και p και εφαρμόζει σε αυτά τις καθορισμένες μορφοποιήσεις. Συγκεκριμένα, ορίζονται η ίδια χρώματα κειμένου, μέγεθος γραμματοσειράς, πάχος γραμματοσειράς και κάτω περιθώριο για αυτά τα στοιχεία.
Με αυτόν τον τρόπο, μπορείτε να ορίσετε κοινές μορφοποιήσεις για πολλά στοιχεία ταυτόχρονα, χωρίς να χρειάζεται να επαναλάβετε τις ίδιες καθορισμένες μορφοποιήσεις για κάθε στοιχείο ξεχωριστά.
Χρησιμοποιώντας τον επιλογέα ομαδοποίησης, μπορείτε να εφαρμόσετε τις ίδιες μορφοποιήσεις σε πολλά στοιχεία με μία μόνο δήλωση CSS, γεγονός που καθιστά τον κώδικά σας πιο συμπαγή και ευανάγνωστο.