Ένα από τα σημαντικότερα στοιχεία του CSS που πρέπει να καταλάβει κανείς, είναι τα selectors.
Τα selectors είναι αυτά που μας επιτρέπουν να στοχεύσουμε συγκεκριμένα HTML στοιχεία και να τους δώσουμε συγκεκριμένο ύφος/style.
Στα παραδείγματα που θα δούμε, ο κώδικας CSS βρίσκεται σε ένα αρχείο style.css, στο οποίο έχει γίνει αναφορά μέσα από το αρχείο HTML, index.html. Είναι αρκετά σημαντικό να κρατά κανείς τον κώδικα CSS σε ξεχωριστό αρχείο (που είναι σημαντική λειτουργία που προσφέρει το CSS), αφού έτσι κρατάμε το design από το κείμενο.
Το αρχείο HTML θα μοιάζει με:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<html> <head> <title>Selectors</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1 id="peiler">Hello World</h1> <body> </html> |
Και το αρχείο CSS θα περιέχει selector blocks όπως αυτά που θα δούμε πιο κάτω.
ID selector
1 2 3 |
#peiler { ...; } |
1 2 3 4 5 6 7 8 9 10 11 |
<!-- Λειτουργεί --> <div id="peiler"></div> <!-- Λειτουργεί --> <aside id="peiler"></aside> <!-- Δεν Λειτουργεί --> <div id="pepeiler">Λάθος ID</div> <!-- Δεν Λειτουργεί --> <div class="peiler">Δεν είναι ID</div> |
Τα ID selectors είναι πιο δυνατός τύπος selector στην ιεραρχία του CSS (CSS specificity). Αυτό σημαίνει ότι υπερνικούν άλλους τύπους που μπορεί να έχουν οριστεί. Θα μπορούσε να πει κανείς ότι είναι ένα καλό στοιχείο, αλλά πολλές φορές θεωρείται κακό, γιατί είναι καλό να έχουμε selectors σε χαμηλότερη θέση στην ιεραρχία, ώστε να μπορούν να γίνουν override.
Class Selector
1 2 3 |
.peiler { ...; } |
1 2 3 4 5 6 7 8 9 10 11 |
<!-- Λειτουργεί --> <div class="peiler"></div> <!-- Λειτουργεί --> <aside class="chocobar peiler fruitbar"></aside> <!-- Δεν Λειτουργεί --> <div class=".peiler">Η τελεία είναι μόνο για το CSS, όχι το HTML</div> <!-- Δεν Λειτουργεί --> <div class="peilerbar">Λάθος κλάση</div> |
Οι Class selectors είναι πιθανότατα από τους πιο χρήσιμους και πιο ευμετάβλητους selectors. Μπορεί να έχει κανείς πολλές κλάσεις/classes σε ένα HTML στοιχείο. Σημαντικό είναι ότι έτσι μπορεί να ελέγξει μέσω JavaScript τις εκάστοτε κλάσεις.
Tag Selector
1 2 3 |
h2 { ...; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!-- Λειτουργεί --> <h2>Γειααα</h2> <main> <div> <!-- Λειτουργεί --> <h2>Κάτι</h2> </div> </main> <!-- Δεν Λειτουργεί --> <div class="h2">Λάθος tag</div> <!-- Δεν Λειτουργεί --> <h2class="test">Make sure that tag has a space after it!</h2> |
Οι Tag selectors είναι οι πιο χρήσιμοι όταν χρειάζεται να αλλάξουν οι ιδιότητες που είναι μοναδικές στο HTML στοιχείο. Καλό θα ήταν όμως να μην στηριζόμαστε πολύ σε αυτούς, τυπικά είναι πιο χρήσιμο να έχουμε μία class που καθορίζει το style σε όλα τα στοιχεία που μας ενδιαφέρουν.
Attribute Selector
1 2 3 |
[data-modal="open"] { ...; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!-- Λειτουργεί --> <div data-modal="open"></div> <!-- Λειτουργεί --> <aside class='closed' data-modal='open'></aside> <!-- Δεν Λειτουργεί --> <div data-modal="false">Λάθος τιμή</div> <!-- Δεν Λειτουργεί --> <div data-modal>Δεν έχει τιμή</div> <!-- Δεν Λειτουργεί --> <div data-modal-open>Λάθος attribute</div> |
Τα attribute selectors έχουν συγκεκριμένο specificity value, αλλά μπορούν να είναι οποιοδήποτε attribute όχι απλά μία κλάση, και έχουν κάποια τιμή που διαλέγουμε εμείς. Και αυτό είναι ένας λόγος που κάποιοι τα θεωρούν πιο χρήσιμα από τα classes.
Positional Selectors
1 2 3 |
:nth-child(2) { ...; } |
1 2 3 4 5 6 |
<ul> <li>Λειτουργεί;</li> <!-- Λειτουργεί --> <li>Ναι Λειτουργεί, είναι το #2 στοιχείο</li> <li>Δεν Λειτουργεί</li> </ul> |
Υπάρχουν πολλοί διαφορετικοί positional selectors. Εδώ είδαμε τον nth-child, αλλά μπορεί κανείς να δοκιμάσει διάφορους συνδυασμούς για να επιλέξει διαφορετικά στοιχεία σύμφωνα με την θέση τους μέσα στον κώδικα HTML.
Pseudo Selectors
1 2 3 |
:empty { ...; } |
1 2 3 4 5 6 7 8 9 10 11 12 |
<!-- Λειτουργεί --> <div></div> <!-- Λειτουργεί --> <aside data-peiler><!-- δεν υπάρχει περιεχόμενο --></aside> <!-- Δεν Λειτουργεί --> <div> </div> <!-- Δεν Λειτουργεί --> <div> </div> |
Υπάρχουν πολλοί ψευδο – selectors, όπως και ο :empty που είδαμε στο παραπάνω παράδειγμα, τους οποίους μπορούμε να τους ξεχωρίσουμε με το σύμβολο της άνω και κάτω τελείας – semicolon :.
Συνήθως εκπροσωπούν κάτι που δεν θα μπορούσαμε να αναγνωρίσουμε μόνο από το στοιχείο και τα attributes.
Σημαντικό είναι να προσέξει κανείς ότι είναι λίγο διαφορετικά από τα pseudo elements, τα οποία μπορεί να τα αναγνωρίσει κανείς από το σύμβολο ::, και τα οποία είναι υπεύθυνα για την προσθήκη πραγμάτων στην σελίδα σύμφωνα με τα πράγματα που έχουν επιλεγεί.
Και τέλος, μπορεί κανείς να συνδυάσει τους selectors:
1 2 3 4 5 6 7 8 9 |
.module.news { /* Λειτουργεί στα στοιχεία που έχουν ΚΑΙ τις δύο classes */ } #site-footer::after { /* Προσθέτει πράγματα μετά από κάποιο στοιχείο με αυτό το ID */ } section[data-open] { /* Λειτουργεί μόνο τα sections που έχουν αυτό το attribute */ } |
Επίσης μπορεί κανείς να κάνει συνδυασμούς με τους παρακάτω τελεστές:
1 2 3 4 5 6 7 8 9 |
.module > h2 { /* Λειτουγεί πάνω στα στοιχεία h2 που βρίσκονται μέσα σε στοιχείο με αυτή την κλάση */ } h2 + p { /* Λειτουργεί στα στοιχεία p που ακολουθούν μετά από ένα στοιχείο h2 */ } li ~ li { /* Λειτουργεί στα στοιχεία li που είναι siblings (και ακολουθούν) άλλα στοιχεία li */ } |
Πηγές
- www.w3schools.com – css_selectors
- css-tricks.com – Beginner Concepts: How CSS Selectors Work
- internetingishard.com – CSS Selectors

agathan
Αποφοίτησα απο το τμήμα Εφαρμοσμένων Μαθηματικών
του Πανεπιστημίου Κρήτης. Κάτα την διάρκεια εργάστηκα στην
τεχνική υποστήριξη του τμήματος. Ακολούθησε το
μεταπτυχιακό μου, Msc In Applied Mathematics at University Of Delaware. Ύστερα δούλεψα για μερικά χρόνια σαν web developer (CMS and what not) και SEO/Google Ads engineer.
Και τώρα είμαστε στο GeekD, μια λέξη που περιγράφει όλα τα παραπάνω.
"All we have to decide is what to do with the time that is given us."
-Gandalf The Grey, JRR Tolkien

Latest posts by agathan (see all)
- Αφιλόξενος πλανήτης Αφροδίτη: θα μπορούσε να υπάρχει ζωή; - 1 Οκτωβρίου 2020
- Τα ιπτάμενα αυτοκίνητα αρχίζουν να γίνονται πραγματικότητα - 13 Σεπτεμβρίου 2020
- Η ιστορική εκτόξευση της SpaceX που θα μεταφέρει αστροναύτες στον ISS - 26 Μαΐου 2020
Αφήστε ένα σχόλιο