Αναμείνατε ολίγον τι
Web Devel

Πως λειτουργούν τα CSS Selectors

CSS selectors

Ένα από τα σημαντικότερα στοιχεία του CSS που πρέπει να καταλάβει κανείς, είναι τα selectors.

Τα selectors είναι αυτά που μας επιτρέπουν να στοχεύσουμε συγκεκριμένα HTML στοιχεία και να τους δώσουμε συγκεκριμένο ύφος/style.

Στα παραδείγματα που θα δούμε, ο κώδικας CSS βρίσκεται σε ένα αρχείο style.css, στο οποίο έχει γίνει αναφορά μέσα από το αρχείο HTML, index.html. Είναι αρκετά σημαντικό να κρατά κανείς τον κώδικα CSS σε ξεχωριστό αρχείο (που είναι σημαντική λειτουργία που προσφέρει το CSS), αφού έτσι κρατάμε το design από το κείμενο.

Το αρχείο HTML θα μοιάζει με:

Και το αρχείο CSS θα περιέχει selector blocks όπως αυτά που θα δούμε πιο κάτω.

ID selector

Τα ID selectors είναι πιο δυνατός τύπος selector στην ιεραρχία του CSS (CSS specificity). Αυτό σημαίνει ότι υπερνικούν άλλους τύπους που μπορεί να έχουν οριστεί. Θα μπορούσε να πει κανείς ότι είναι ένα καλό στοιχείο, αλλά πολλές φορές θεωρείται κακό, γιατί είναι καλό να έχουμε selectors σε χαμηλότερη θέση στην ιεραρχία, ώστε να μπορούν να γίνουν override.

Class Selector

Οι Class selectors είναι πιθανότατα από τους πιο χρήσιμους και πιο ευμετάβλητους selectors. Μπορεί να έχει κανείς πολλές κλάσεις/classes σε ένα HTML στοιχείο. Σημαντικό είναι ότι έτσι μπορεί να ελέγξει μέσω JavaScript τις εκάστοτε κλάσεις.

Tag Selector

Οι Tag selectors είναι οι πιο χρήσιμοι όταν χρειάζεται να αλλάξουν οι ιδιότητες που είναι μοναδικές στο HTML στοιχείο. Καλό θα ήταν όμως να μην στηριζόμαστε πολύ σε αυτούς, τυπικά είναι πιο χρήσιμο να έχουμε μία class που καθορίζει το style σε όλα τα στοιχεία που μας ενδιαφέρουν.

Attribute Selector

Τα attribute selectors έχουν συγκεκριμένο specificity value, αλλά μπορούν να είναι οποιοδήποτε attribute όχι απλά μία κλάση, και έχουν κάποια τιμή που διαλέγουμε εμείς. Και αυτό είναι ένας λόγος που κάποιοι τα θεωρούν πιο χρήσιμα από τα classes.

Positional Selectors

Υπάρχουν πολλοί διαφορετικοί positional selectors. Εδώ είδαμε τον nth-child, αλλά μπορεί κανείς να δοκιμάσει διάφορους συνδυασμούς για να επιλέξει διαφορετικά στοιχεία σύμφωνα με την θέση τους μέσα στον κώδικα HTML.

Pseudo Selectors

Υπάρχουν πολλοί ψευδο – selectors, όπως και ο :empty που είδαμε στο παραπάνω παράδειγμα, τους οποίους μπορούμε να τους ξεχωρίσουμε με το σύμβολο της άνω και κάτω τελείας – semicolon :.

Συνήθως εκπροσωπούν κάτι που δεν θα μπορούσαμε να αναγνωρίσουμε μόνο από το στοιχείο και τα attributes.

Σημαντικό είναι να προσέξει κανείς ότι είναι λίγο διαφορετικά από τα pseudo elements, τα οποία μπορεί να τα αναγνωρίσει κανείς από το σύμβολο ::, και τα οποία είναι υπεύθυνα για την προσθήκη πραγμάτων στην σελίδα σύμφωνα με τα πράγματα που έχουν επιλεγεί.

Και τέλος, μπορεί κανείς να συνδυάσει τους selectors:

Επίσης μπορεί κανείς να κάνει συνδυασμούς με τους παρακάτω τελεστές:

Πηγές

 

Μοιραστείτε το άρθρο

The following two tabs change content below.

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

Αφήστε ένα σχόλιο

Επιλογές της ομάδας
σκίτσο του Άλμπερτ Αϊνστάιν
Πώς τα μυστικά των πρώτων αριθμών κάνουν τον κόσμο μας ασφαλέστερο
Πώς ο Ερατοσθένης υπολόγισε την περιφέρεια της Γης πάνω από 2000 χρόνια πριν;
Τι θα γινόταν αν ο αυτισμός ήταν ... υπερδύναμη;
Εκπληκτικές φωτογραφίες του Cassini λίγο πριν τη συντριβή του στον Κρόνο