CSS selectors: Ότι πρέπει να ξέρετε! (μέρος 1ο - CSS 1)

Σημείωση: Το παρακάτω άρθρο γράφτηκε τον Νοέμβρη του 2008 (πριν 6 χρόνια!) για το CSS3.gr.

Ένα από τα πράγματα που λατρεύω στο CSS είναι η απλότητα του. Απλά επιλέγεις το element στο οποίο θέλεις να δουλέψεις και του προσθέτεις τους styling κανόνες που θα ακολουθεί. Τόσο απλά! Το παρακάτω άρθρο λοιπόν, θα παρουσιάσει όλους τους CSS selectors ξεκινώντας από την πρώτη έκδοση του CSS φτάνοντας μέχρι και το τελευταίο standard, το CSS3.

Σας υπόσχομαι, πως μετά την ολοκλήρωση του άρθρου η επιλογή των element θα σας φαίνεται παιχνιδάκι, ενώ ταυτόχρονα θα βελτιώσετε και την συγγραφή XHTML, μιας και δεν θα υπάρχει λόγος να χρησιμοποιείτε περιττές κλάσεις (classes) και ids, πέρα από τα απολύτως απαραίτητα.

Πολλοί από τους παρακάτω selectors δεν υποστηρίζονται από όλους του browsers ακόμα, ωστόσο καλό είναι να γνωρίζουμε όσους περισσότερους γίνεται, έτσι ώστε να κάνουμε την ζωή μας ευκολότερη! Αφήστε που πλέον μπορούμε να τους χρησιμοποιήσουμε και για άλλες εργασίες, όπως για παράδειγμα, για την επιλογή κάποιου element σε κάποια Javascript library όπως το jQuery.

Για λόγους ευκολίας, το άρθρο έχει χωριστεί σε τρία κομμάτια, παρουσιάζοντας τους selectors του CSS1, CSS2 και CSS3 αντίστοιχα.

Σε αυτό το πρώτο κομμάτι θα παρουσιαστούν οι selectors του CSS1, οι οποίοι αποτελούν την βάση, έτσι ώστε να περάσετε και στους πιο περίπλοκους selectors του CSS2 καθώς και στους ολοκαίνουριους selectors του CSS3. Πέρα από την αναλυτική παρουσίαση του κάθε selector, καθώς και του pattern που ακολουθεί, θα υπάρχει και κάποιο χρήσιμο παράδειγμα, έτσι ώστε τα πάντα να είναι ξεκάθαρα και κατανοητά.

Τέλος, για λόγους ευκολίας, το κάθε pattern θα στηρίζεται στην παρακάτω σύνταξη: Το γράμμα E θα αντιπροσωπεύει οποιοδήποτε valid (X)HTML element, το string att αντιπροσωπεύει οποιοδήποτε valid (X)HTML attribute ενώ το string val αντιπροσωπεύει την τιμή (value) που μπορεί να πάρει το κάθε attribute.

Μετά από αυτές τις επεξηγήσεις μπορούμε να ξεκινήσουμε λοιπόν!

Μια μικρή εισαγωγή σε CSS1

Η πρώτη εμφάνιση του CSS δεν έχει να παρουσιάσει και πολύ σπουδαία πράγματα, ωστόσο έθεσε τις βάσεις (και πολύ γερές μάλιστα) για την επερχόμενη επανάσταση στο web! Ο χωρισμός του markup από το style ήταν η μεγαλύτερη επανάσταση στο web, τουλάχιστον από τεχνική άποψη. Παρακάτω μπορείτε να διαβάσετε τους πρώτους CSS selectors που έθεσε το W3C…

Type selector

Ο πιο εύκολος και βασικός selector. Απλά επιλέγει κάποιο element που υπάρχει στο DOM (Document Object Model) (Document Object Model).

Pattern

E {}

Παράδειγμα

h1 {
  color: red;
}

ID selector

O selector που ίσως χρησιμοποιείται συχνότερα απ’ όλους (μαζί με τον class selector)! Κάθε σελίδα (document) μπορεί να έχει μόνο μία και μοναδική τιμή για κάθε id attribute. Έτσι κανένα element δεν μπορεί να έχει την ίδια id τιμή με κάποιο άλλο element, κάνοντας το με αυτόν τον τρόπο μοναδικό. Μπορούμε λοιπόν να το επιλέξουμε γράφοντας απλά την τιμή που έχει στο id του με μία δίεση (#) μπροστά, προσθέτοντας εάν θέλουμε, και τον τύπο του element πριν από την δίεση.

Pattern

#id {}
E#id {}

Παράδειγμα

#maintitle {
  color: red;
}

h1#maintitle {
  color: red;
}

Class selector

O δεύτερος must selector που πρέπει οπωσδήποτε να γνωρίζουμε! Και πάλι οποιοδήποτε element μπορεί να δεχθεί μία κλάση (ή αλλιώς class attribute). Σε αντίθεση με το id attribute, μέσα σε μία σελίδα (document), μπορούν να υπάρχουν πολλές κλάσεις (classes) με την ίδια τιμή. Η επιλογή γίνεται όπως ακριβώς παραπάνω με την διαφορά πως αντί για δίεση, χρησιμοποιούμε τελεία (.).

Pattern

.class {}
E.class {}

Παράδειγμα

.warning {
  color: red;
}

span.warning {
  color: red;
}

Descendant selector

Ακόμα ένας σημαντικότατος selector. Εάν θέλουμε να επιλέξουμε τον απόγονο (descendant) κάποιου element, απλά επιλέγουμε το element “πρόγονο” (ancestor), αφήνουμε ένα κενό (whitespace) και στην συνέχεια επιλέγουμε τον απόγονο που θέλουμε.

Η διαδικασία αυτή μπορεί να γίνει αλλεπάλληλες φορές στον ίδιο selector, αρκεί ο απόγονος που επιλέγουμε να υπάρχει φυσικά στο DOM (Document Object Model). Όπως καταλαβαίνετε ο συγκεκριμένος selector μπορεί να γίνει πολύ πολύπλοκος, μιας και συνήθως ανακατεύει πολλούς απλούστερους selectors (συνήθως id, class και element selectors) και δημιουργεί μεγάλες αλυσίδες από elements της σελίδας μας (ρίξτε μια ματιά στα παρακάτω παραδείγματα).

Pattern

E E {}
#id E {}
.class E {}
#id .class Ε {}

*οποιαδήποτε σωστή (valid) αλληλουχία από selectors που υπάρχουν στο DOM.

Παράδειγμα

p strong {
  color: red;
}

#testid span {
  color: red;
}

.warningclass strong {
  color: red;
}

#feature .article p strong {
  color: red;
}

First-line και First-letter pseudo-elements selectors

Τέλος οι παρακάτω selectors δημιουργήθηκαν έτσι ώστε να επιλέγουμε συγκεκριμένα κομμάτια markup χωρίς ταυτόχρονα να γεμίζουμε τον κώδικα μας με άσκοπες κλάσεις (classes). Πολλοί browsers, ιδιαίτερα οι παλιότεροι, δεν αναγνωρίζουν τους παρακάτω selectors, ωστόσο καλό είναι να τους γνωρίζουμε, μιας και μπορούμε πολύ εύκολα να δημιουργήσουμε έξυπνα εφέ στα site μας. Οι χρήστες παλιότερων browsers, απλά δεν θα απολαμβάνουν τα εν λόγω εφέ, χωρίς ωστόσο να χαλάει τίποτα άλλο στο browser τους!

Το μόνο που έχετε να κάνετε για να διαλέξετε το πρώτο γράμμα ή την πρώτη γραμμή ενός κειμένου, είναι να επιλέξετε το element που θέλετε με οποιονδήποτε selector, και στην συνέχεια να προσθέσετε 2 φορές άνω-κάτω τελεία (:) και την λέξη (keyword) first-letter ή first-line αντίστοιχα.

Pattern - first-line pseudo-element

E::first-line {}

Παράδειγμα first-line pseudo-element

p::first-line {
  background-color: red;
}

Pattern - first-letter pseudo-element

E::first-letter {}

Παράδειγμα first-letter pseudo-element

p::first-letter {
  font-size: 200%;
  text-transform: uppercase;
}

Επίλογος

Κάπως έτσι ξεκίνησε το CSS και σιγά-σιγά προστέθηκαν από το World Wide Web Consortium ακόμα πιο έξυπνοι selectors έτσι ώστε να επιλέγουμε ακόμα πιο γρήγορα και με περισσότερη ακρίβεια τα διάφορα elements ενός document.

Οι σελίδες (documents) έχουν γίνει πλέον πολύ πολύπλοκες και απαιτητικές, και όσους περισσότερους τρόπους επιλογής ξέρουμε, τόσα λιγότερα προβλήματα θα αντιμετωπίζουμε κατά την κατασκευή των σελίδων μας… Μείνετε συντονισμένοι στο CSS3.gr για το δεύτερο και τρίτο μέρος του άρθρου όπου παρουσιάζονται οι CSS2 και CSS3 selectors αντίστοιχα.