css

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

16/04/2014

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

Καλώς ήρθατε στο 2ο μέρος του άρθρου “CSS selectors: Ότι πρέπει να ξέρετε!” Σε αυτό το δεύτερο μέρος θα παρουσιαστούν αναλυτικά οι διάφοροι CSS 2 selectors. Γι’ αυτούς που δεν έχουν διαβάσει το πρώτο μέρος και δεν θεωρούν τους εαυτούς τους CSS gurus, καλό θα ήταν να ρίξουν μια ματιά στο προηγούμενο μέρος του άρθρου έτσι ώστε να ξεκινήσουν σωστά και να θέσουν “γερές” βάσεις στο θέμα CSS selectors. Στην συνέχεια μπορούν να συνεχίσουν την ανάγνωση του συγκεκριμένου άρθρου, στο οποίο θα βρουν συγκεντρωμένους όλους τους CSS 2 selectors.

Σε αυτό το σημείο θα ήθελα να αναφέρω πως οι CSS 1 και 2 selectors αποτελούν τον πυρήνα των CSS selectors, μιας και οι περισσότεροι σύγχρονοι browsers (Firefox, Opera, Chrome, Safari και Internet Explorer 8) τους υποστηρίζουν πλήρως! Τώρα υπάρχουν κάποια μικρά προβληματάκια με τον Internet Explorer 7 (και ακόμα πιο μεγάλα με τον 6) ωστόσο το γεγονός πως ο Internet Explorer 8 κατάφερε επιτέλους να υποστηρίξει όλους τους CSS 1 και 2 selectors, θεωρήθηκε μεγάλη επιτυχία. Τέλος, θα ήθελα να υπενθυμίσω πως στο πρώτο μέρος του άρθρου εξηγώ πολύ αναλυτικά τους διάφορους χαρακτήρες και σύμβολα που χρησιμοποιώ για τα pattern του κάθε selector. Εάν λοιπόν δεν τα θυμάστε ή δυσκολεύεστε να καταλάβετε κάτι, ρίξτε τους μια γρήγορη ματιά. Ας ξεκινήσουμε λοιπόν…

CSS2 selectors

Για να είμαστε και ακριβείς οι παρακάτω selectors είναι οι selectors που εμφανίστηκαν στην έκδοση 2.1 των προδιαγραφών (specifications) CSS, όμως γενικότερα στο web design όταν λέμε CSS έκδοση (version) 2 συνήθως εννοούμε την έκδοση 2.1. Η συγκεκριμένη έκδοση ήταν η πιο σημαντική αναβάθμιση των προδιαγραφών, όχι μόνο επειδή πρόσφερε απλόχερα νέους selectors, κανόνες και γενικότερα πολλές νέες δυνατότητες, αλλά επειδή κατάφερε να πείσει την web κοινότητα πως με την εν λόγω τεχνολογία μπορούμε επιτέλους να διαχωρίσουμε το περιεχόμενο (content) από την εμφάνιση (style). Και επειδή όπως καταλαβαίνετε έχουμε πολλά να πούμε, περνάω αμέσως στο κυρίως θέμα.

Universal selector

Ο γνωστός, σε όλους μας θέλω να πιστεύω, universal selector, αντιπροσωπεύει όλα τα elements που έχει το document. Γράφοντας δηλαδή τον αστερίσκο (*) επιλέγουμε όλα τα elements που υπάρχουν στην σελίδα μας, και από εκεί και πέρα δηλώνουμε τους κανόνες μας.

Pattern

* {}

Παράδειγμα

* {
  margin: 0;
  padding: 0;
}

Child combinator

Άλλος ένας πολύ χρήσιμος selector που δυστυχώς δεν χρησιμοποιείται όσο θα έπρεπε, κυρίως λόγω της ελλιπής υποστήριξης του στον Internet Explorer 6 (o 7 τον υποστηρίζει επιτέλους). Με το σύμβολο “μεγαλύτερο από” (>) επιλέγουμε το δεύτερο element (το element που εμφανίζεται δεξιά από το σύμβολο >) το οποίο έχει “γονιό” (parent) το πρώτο element (αυτό που βρίσκεται αριστερά από το σύμβολο >).

Η διαφορά με τον descendant selector που περιέγραψα στο πρώτο μέρος του άρθρου, είναι πως ο συγκεκριμένος selector θα λειτουργήσει μόνο εάν το δεύτερο element είναι child, και όχι απλός απόγονος (descendant) του πρώτου element.

Pattern

E > E {}

Παράδειγμα

body > p {
  color: red;
}

ol > li {
  color: red;
}

Adjacent sibling combinator

Ακόμα ένας χρήσιμος selector που δυστυχώς δεν χρησιμοποιείται σχεδόν καθόλου λόγω ελλιπής υποστήριξης στον Internet Explorer. Με το σύμβολο συν (+) επιλέγουμε το δεύτερο element (το element που εμφανίζεται δεξιά από το σύμβολο +) και έχει κοινό γονιό (parent) με το το πρώτο element (αυτό που βρίσκεται αριστερά από το σύμβολο +) και εμφανίζεται στο DOM ακριβώς μετά από αυτό.

Επειδή ίσως σας μπέρδεψα λίγο, ας δούμε μαζί το παρακάτω παράδειγμα. Στο παρακάτω παράδειγμα λοιπόν, το δεύτερο heading (h2) θα έχει κόκκινο χρώμα, μόνο εάν έχει κοινό γονιό με το h1 (με class opener) και εμφανίζεται στο DOM ακριβώς μετά από αυτό. Όλα τα άλλα h2 δεν θα έχουν κόκκινο χρώμα.

Pattern

E + E {}

Παράδειγμα

h1.opener + h2 {
  color: red;
}

Attribute selectors

Με το CSS 2.1 κάνουν επιτέλους την εμφάνιση τους οι πρώτοι τρεις attribute selectors, οι οποίοι πραγματικά έχουν να προσφέρουν πολλά πράγματα στο θέμα των selectors. Όπως ήταν λογικό λίγοι browsers τους υποστήριξαν αμέσως, ωστόσο πλέον μπορούμε να τους χρησιμοποιήσουμε χωρίς ιδιαίτερα προβλήματα (με εξαίρεση και πάλι τον IE6). Παρακάτω παρουσιάζω όλους τους CSS 2.1 attribute selectors, μιας και στο CSS3 προστέθηκαν και άλλοι.

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

Στον πρώτο selector λοιπόν, επιλέγουμε το element (E) με attribute “att”. Έτσι στο παράδειγμα μας οποιοδήποτε h1 element έχει κάποιο “title” attribute, οποιαδήποτε τιμή και αν περιέχει, θα έχει κόκκινο χρώμα.
Στον δεύτερο selector, επιλέγουμε το element (E) με attribute “att” και τιμή (value) “val”. Στο παράδειγμα μας λοιπόν, όποιο h1 element έχει “title” attribute με τιμή “main”, θα έχει κόκκινο χρώμα.
Τέλος στον τελευταίο selector, επιλέγουμε το element (E) με attribute “att” και τιμή (value) “val” κάποια από τις πολλές τιμές (οι οποίες χωρίζονται με κενό/whitespace) που μπορεί να έχει το συγκεκριμένο attribute. Έτσι στο τελευταίο παράδειγμα, οι τίτλοι (h1) με “title” attribute “main” και “header” θα έχουν κόκκινο χρώμα.

Patterns

E[att] {}
E[att=”val”] {}
E[att~=”val”] {}

Παραδείγματα

h1[title] {
  color: red;
}

h1[title="main"] {
  color: red;
}

h1[title~="main header"] {
  color: red;
}

Pseudo-classes

Οι ψευδοκλάσεις (pseudo-classes) ήταν μια πολύ έξυπνη ιδέα που έκανε την εμφάνιση της στις πρώτες CSS οδηγίες, ωστόσο όπως σωστά μαντέψατε λίγοι browsers τις υποστήριξαν τότε. Οι περισσότερες ψευδοκλάσεις υποστηρίχθηκαν πλήρως από τους browsers όταν εμφανίστηκε το CSS 2.1 στο οποίο και παρουσιάστηκαν πιο αναλυτικά και σωστά. Σήμερα όλοι οι μοντέρνοι browsers υποστηρίζουν τις παρακάτω ψευδοκλάσεις (o IE6 ποτέ δεν υποστήριξε την first-child ψευδοκλάση, αλλά μικρό το κακό) και είναι από τους selectors που πρέπει οπωσδήποτε να γνωρίζετε, γιατί με αυτούς μπορείτε να δώσετε ζωή στα links και στα μενού επιλογών σας.

Για να καταλάβετε ακόμα καλύτερα τόσο τον τρόπο λειτουργίας τους, όσο και τον λόγο για τον οποίο έχουν ονομαστεί έτσι (ψευδοκλάσεις/pseudo-classes), σκεφτείτε το παρακάτω παράδειγμα. Έστω ότι έχουμε ένα anchor element (κοινώς link), στο οποίο θέλουμε να δώσουμε διάφορους styling κανόνες ανάλογα με την κατάσταση (status) που έχει στο DOM την δεδομένη στιγμή (δηλαδή εάν ο κέρσορας είναι πάνω του, εάν ο χρήστης έχει ήδη επισκεφθεί το link, κτλ.). Εάν δεν είχαμε τις ψευδοκλάσεις θα έπρεπε όλα τα links του site μας να είχαν τις ανάλογες κλάσεις (classes) έτσι ώστε να καταφέρουμε να πετύχουμε το παραπάνω αποτέλεσμα. Όπως καταλαβαίνετε κάτι τέτοιο όχι μόνο θα χάλαγε αρκετά τον όρο semantic στο markup μας, αλλά θα ήταν και πολύ δύσκολο να συντηρήσουμε το εν λόγω markup, μιας και θα αναγκαζόμασταν να χρησιμοποιούμε πάρα πολλές κλάσεις για κάτι που θα έπρεπε να είναι απλό. Με αυτήν την λογική λοιπόν, οι ψευδοκλάσεις λύνουν το συγκεκριμένο πρόβλημα. Παρακάτω εξηγώ αναλυτικά τις 6 ψευδοκλάσεις (pseudo-classes) που εμφανίζονται στις CSS 2.1 οδηγίες.

Στον πρώτο selector, επιλέγουμε το element E που είναι ο πρώτος απόγονος (child) του “γονιού” element. Έτσι στο παράδειγμα μας το πρώτο list item (li) κάθε λίστας θα έχει κόκκινο χρώμα.
Ο δεύτερος selector ισχύει μόνο για τα anchor element (a ή απλά links), και ακόμα πιο συγκεκριμένα τα anchor elements τα οποία δεν έχει επισκεφθεί μέχρι εκείνη την στιγμή ο browser του χρήστη. Στο παράδειγμα μας δηλαδή, το link (a) εάν δεν το έχει επισκεφθεί ο χρήστης, θα έχει πράσινο χρώμα.
Και ο τρίτος selector ισχύει μόνο για τα anchor elements, αλλά αυτή την φορά γι’ αυτά που έχει επισκεφθεί ο browser του χρήστη. Έτσι στο παράδειγμα μας, το link (a) εάν το έχει επισκεφθεί ο χρήστης, θα έχει κόκκινο χρώμα.
Ο τέταρτος selector είναι ίσως ο πιο γνωστός, μιας και επιλέγει το εκάστοτε element όταν ο κέρσορας του mouse βρίσκεται από πάνω του. Έτσι στο παράδειγμα μας το link (a) θα έχει μπλε χρώμα όταν το mouse βρίσκεται πάνω του.
Ο πέμπτος selector επιλέγει το εκάστοτε element όταν είναι active, όπως για παράδειγμα όταν ο χρήστης έχει πατήσει (και αφήσει) κάποιο κουμπί (button). Δεν από τις δημοφιλείς ψευδοκλάσεις, μιας και χρησιμοποιείτε κυρίως σε φόρμες και links, ωστόσο για λόγους συμβατότητας, όταν γράφουμε κανόνες styling για μενού, καλό θα είναι να τον χρησιμοποιούμε (μιας και οι παλιότερες εκδόσεις του Internet Explorer θέλουν και τις τέσσερις ψευδοκλάσεις σε συγκεκριμένη σειρά!). Στο παράδειγμα μας δηλαδή, το link (a) ενώ έχουμε πατημένο το ποντίκι, θα έχει γκρι χρώμα.
Τέλος στον τελευταίο selector, επιλέγουμε το element που έχει την εστίαση (focus) την εκάστοτε στιγμή. Έτσι στο παράδειγμα μας το input element που έχουμε εστιάσει, θα έχει μπλε border γύρω του.

Σε αυτό το σημείο θα ήθελα να σημειώσω πως οι 3 τελευταίες ψευδοκλάσεις (hover, active, και focus) μπορούν να χρησιμοποιηθούν σε οποιοδήποτε element (και όχι μόνο σε anchor elements - links), ωστόσο δεν θα δουλεύουν σε Internet Explorer 6 και γενικότερα σε παλιότερους browsers.

Patterns

E:first-child
E:link
E:visited
E:hover
E:active
E:focus

Παραδείγματα

li:first-child {
  color: red;
}

a:link {
  color: green;
}

a:visited {
  color: red;
}

a:hover {
  color: blue;
}

a:active {
  color: grey;
}

input:focus {
  border: 2px solid blue;
}

Pseudo-elements

Τα pseudo-elements είναι και αυτά με την σειρά τους κάποιοι έξυπνοι selectors, οι οποίοι εμφανίστηκαν και αυτοί στις πρώτες CSS οδηγίες, ωστόσο οι περισσότεροι browsers τους υποστήριξαν πάλι καθυστερημένα. Όπως και οι ψευδοκλάσεις, έτσι και τα pseudo-elements κρύβουν και αυτά κάποιον λόγο που έχουν ονομαστεί έτσι.

Θα εξηγήσω και πάλι με ένα παράδειγμα που χρησιμεύουν και τον λόγο που έχουν ονομαστεί έτσι. Έστω λοιπόν πως θέλετε να επιλέξετε το πρώτο γράμμα μιας παραγράφου (p) έτσι ώστε να το τροποποιήσετε και να δημιουργήσετε κάποιο από τα εφέ που βλέπετε πολύ συχνά σε βιβλία και εκτυπώσεις. Εάν δεν υπήρχαν τα pseudo-elements, θα έπρεπε να προσθέσουμε το πρώτο γράμμα της παραγράφου μέσα σε κάποιο άλλο element (tag), μέσα σε ένα span ας πούμε, το οποίο θα έκανε πιο πολύπλοκη την markup μας αλλά και την συντήρηση της (έστω και με την βοήθεια κάποιας server-side γλώσσας).

Τα pseudo-elements δημιουργήθηκαν για να αποφευχθούν ακριβώς τέτοια προβλήματα. Αντί να δημιουργούμε καινούργια elements, να χαλάμε την markup μας και να κάνουμε πιο περίπλοκα τα πράγματα, με τους συγκεκριμένους selectors κάνουμε την δουλειά μας εύκολα και “καθαρά”… Παρακάτω εξηγώ και τους 4 pseudo-elements selectors (οι 2 πρώτοι είναι από τις CSS 1 οδηγίες, ενώ οι υπόλοιποι είναι από τις CSS 2.1 οδηγίες), οι οποίοι υποστηρίζονται επιτέλους από τους περισσότερους browsers.

Στον πρώτο selector, επιλέγουμε το πρώτο γράμμα (letter) του element E. Έτσι στο παράδειγμα μας το πρώτο γράμμα της παραγράφου (p) θα έχει font-size 3em.
Στον δεύτερο selector, επιλέγουμε την πρώτη σειρά (line) του element E. Έτσι στο παράδειγμα μας η πρώτη σειρά της παραγράφου (p) θα έχει όλα τα γράμματα κεφαλαία (text-transform: uppercase).
Στον τρίτο selector, επιλέγουμε το element E και προσθέτουμε δυναμικά πριν από αυτό το περιεχόμενο (content) που βρίσκεται μέσα στα εισαγωγικά (”). Έτσι στο παράδειγμα μας το quote (q) element θα έχει διπλά εισαγωγικά («) πριν από αυτό.
Τέλος στο τελευταίο παράδειγμα, επιλέγουμε το element E και προσθέτουμε δυναμικά μετά από αυτό το περιεχόμενο (content) που βρίσκεται μέσα στα εισαγωγικά (”). Έτσι στο παράδειγμα μας το quote (q) element θα έχει διπλά εισαγωγικά (») μετά από αυτό.

Patterns

E::first-letter
E::first-line
E::before
E::after

Παραδείγματα

p::first-letter {
  font-size: 3em;
}

p::first-line {
  text-transform: uppercase;
}

q::before {
  content: "«";
}

q::after {
  content: "»";
}

Επίλογος

Με την ολοκλήρωση και του δεύτερου μέρους του άρθρου έχετε καλύψει όλους τους βασικούς selectors που μπορείτε να χρησιμοποιήσετε στο CSS (και όχι μόνο)… Οι CSS 2.1 οδηγίες ήταν αυτές που στην ουσία έπεισαν τους περισσότερους web designers πως μπορούν να αλλάξουν το web και να διαχωρίσουν επιτέλους το περιεχόμενο από την εμφάνιση. Οι παραπάνω κανόνες, μαζί με αυτούς που αναφέρθηκαν στο πρώτο μέρος του άρθρου, αποτελούν την βάση των CSS selectors. Οι συγκεκριμένοι selectors βοήθησαν πολύ στην ανάπτυξη του web και επιτέλους έχουμε φτάσει σε ένα πολύ ικανοποιητικό επίπεδο υποστήριξης και από τους περισσότερους browsers.

Ελπίζω να μην σας κούρασα πολύ, μιας και παρουσιάστηκαν πολλά πράγματα σε αυτό το μέρος, ωστόσο νομίζω πως σίγουρα άξιζε τον κόπο. Τέλος θα ήθελα να αναφέρω πως στο τρίτο και τελευταίο μέρος του άρθρου θα παρουσιαστούν οι ολοκαίνουριοι CSS 3 selectors, οπότε μείνετε συντονισμένοι!