CSS selectors : Ότι πρέπει να ξέρετε! (μέρος 3ο – CSS3)

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

Καλώς ήρθατε στο τρίτο και τελευταίο μέρος του άρθρου “CSS selectors : Ότι πρέπει να ξέρετε”! Με αυτό το μέρος ολοκληρώνεται η σειρά των άρθρων που παρουσιάζουν όλους τους CSS selectors, μέχρι τουλάχιστον να εμφανιστεί το CSS4 (που πιστέψτε με, θα αργήσει πολύ ακόμα). Σε αυτό το τελευταίο μέρος του άρθρου, παρουσιάζεται ότι πιο καινούργιο έχει να επιδείξει το CSS – σε επίπεδο selectors πάντα – οπότε εάν δεν είστε ήδη πολύ έμπειρος στο θέμα, καλό θα είναι να ρίξετε μια ματιά στο πρώτο και δεύτερο μέρος του άρθρου, έτσι ώστε να ξεκινήσετε με τα πιο βασικά.

CSS3 selectors

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

Attribute selectors

Στο CSS3 προστίθενται ακόμα 3 attribute selectors που προσθέτουν επιπλέον δυνατότητες και έλεγχο στους υπάρχοντες CSS2 attribute selectors.

  1. Στον πρώτο selector λοιπόν, επιλέγουμε το element (Ε), όπου περιέχει την attribute “att” η οποία ξεκινάει με την τιμή “val”.
  2. Στον δεύτερο selector ισχύει το ακριβώς ανάποδο, δηλαδή επιλέγουμε το element (Ε), όπου περιέχει την attribute “att” η οποία τελειώνει με την τιμή “val”.
  3. Τέλος στο CSS3 κάνει την εμφάνιση του και ένας πιο “μπαλαντέρ” selector, ο οποίος επιλέγει το element (Ε), που περιέχει την attribute “att” η οποία περιέχει σε οποιοδήποτε σημείο της το string “val”.

Ρίξτε μια ματιά στα παραδείγματα, μιας και η θεωρία είναι λίγο δυσνόητη στους συγκεκριμένους selectors.

Patterns

  1. E[att^=”val”]
  2. E[att$=”val”]
  3. E[att*=”val”]

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


a[href^="mailto:"] {  
padding-right: 18px;  
background: url(icons/email.png) no-repeat right;  
}  
  
a[href$=".mov"] {  
padding-right: 18px;  
background: url(icons/video.png) no-repeat right;  
}  
  
a[href*="username"] {  
padding-right: 18px;  
background: url(icons/star.png) no-repeat right;  
}  

Pseudo-classes

Οι περισσότερες προσθήκες selectors στο CSS3 έχουν γίνει στις ψευδοκλάσεις, μιας και εμφανίζονται 12 – ναι καλά διαβάσατε – ολοκαίνουριες από αυτές. Προς το παρόν, λίγοι είναι browsers που τις υποστηρίζουν, ωστόσο όπως καταλαβαίνετε οι συγκεκριμένοι selectors είναι το βαρύ πυροβολικό στο CSS3. Ας τις δούμε όμως μία-μία ξεχωριστά.

  1. Επιλέγει το root element του document, που στην περίπτωση μας είναι πάντα το . Όπως καταλαβαίνετε ο συγκεκριμένος selector δεν έχει πολύ νόημα στα (X)HTML document, αλλά είναι πολύ πρακτικός σε άλλους τύπους document, όπως XML.
  2. Η επόμενη ψευδοκλάση είναι ίσως η πιο σημαντική προσθήκη στο CSS3. Με αυτήν μπορούμε να επιλέξουμε το νιοστό (n) child element. Οι παράμετροι που μπορεί να πάρει ο συγκεκριμένος selector είναι πολλοί, γι αυτόν τον λόγο άλλωστε είναι και πανίσχυρος, και μπορεί να είναι αριθμητικές (πχ. 2n+1, όπου θα επιλέξει όλα τα μονά στοιχεία), λέξεις κλειδιά (πχ. odd, οπού θα κάνει ακριβώς το ίδιο) ή κατευθείαν κάποιον αριθμό (πχ. 1, όπου θα επιλέξει το πρώτο child element). Ρίξτε μια ματιά στα παραδείγματα και θα καταλάβετε αμέσως τι δύναμη κρύβει ο συγκεκριμένος selector.
  3. Ακριβώς η ίδια ψευδοκλάση με την παραπάνω (ίδιο συντακτικό, παραμέτρους, κτλ.), με την διαφορά πως αρχίζει το μέτρημα από το τελευταίο και όχι το πρώτο element. Ίσως το W3C να το παραέκανε κάπως, ωστόσο ποτέ δεν ξέρεις που θα σου χρειαστεί κάποιος selector!
  4. Ακόμα μία πολύ χρήσιμη ψευδοκλάση. Με αυτήν μπορούμε να επιλέξουμε το νιοστό (n) child element ενός συγκεκριμένου τύπου, όπως για παράδειγμα ενός γραφικού (img). Οι παράμετροι που μπορεί να δεχθεί είναι ακριβώς οι ίδιοι με τους 2 παραπάνω selectors, δηλαδή αριθμητικές τιμές (πχ. 2n+1, όπου θα επιλέξει όλα τα μονά στοιχεία), λέξεις κλειδιά (πχ. odd, οπού θα κάνει ακριβώς το ίδιο) ή κατευθείαν κάποιον αριθμό (πχ. 1, όπου θα επιλέξει το πρώτο child element).
  5. Ακριβώς η ίδια ψευδοκλάση με την παραπάνω (ίδιο συντακτικό, παραμέτρους, κτλ.), με την διαφορά πως αρχίζει το μέτρημα από το τελευταίο και όχι το πρώτο element.
  6. Και ερχόμαστε επιτέλους σε πιο εύκολες ψευδοκλάσεις οι οποίες υποστηρίζονται και από αρκετούς μοντέρνους browsers. Με την last-child ψευδοκλάση λοιπόν, επιλέγουμε το τελευταίο child element. Αξιοσημείωτο είναι πως ο ανάποδος selector (E:first-child) είχε κάνει την εμφάνιση του στο CSS2!
  7. Επιλέγει το πρώτο child element ενός συγκεκριμένου τύπου, όπως για παράδειγμα γραφικού (img).
  8. Επιλέγει το τελευταίο child element ενός συγκεκριμένου τύπου.
  9. Επιλέγει το μοναδικό child element (δηλαδή το element δεν έχει siblings).
  10. Επιλέγει το μοναδικό child element ενός συγκεκριμένου τύπου (δηλαδή το element δεν έχει άλλα siblings ίδιου τύπου).
  11. Επιλέγει το element το οποίο δεν έχει ούτε child nodes, ούτε text nodes (με άλλα λόγια εμφανίζεται τελείως καινό στο DOM).
  12. Επιλέγει το element, το οποίο είναι ο στόχος κάποιου URI. Όλοι μας έχουμε χρησιμοποιήσει την id ιδιότητα έτσι ώστε να στείλουμε κάποιο link στο συγκεκριμένο σημείο (χρησιμοποιώντας στο τέλος του URL το σύμβολο #). Η συγκεκριμένη ψευδοκλάση λοιπόν αναλαμβάνει να επιλέξει αυτά τα elements.

Patterns

  1. E:root
  2. E:nth-child(n)
  3. E:nth-last-child(n)
  4. E:nth-of-type(n)
  5. E:nth-last-of-type(n)
  6. E:last-child
  7. E:first-of-type
  8. E:last-of-type
  9. E:only-child
  10. E:only-of-type
  11. E:empty
  12. E:target

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


:root { color: red; }  
  
tr:nth-child(2n+1) /* επιλέγει όλες τις μονές σειρές ενός πίνακα */  
tr:nth-child(odd) /* επιλέγει όλες τις μονές σειρές ενός πίνακα, χρησιμοποιώντας την λέξη κλειδί odd  */  
tr:nth-child(2n) /* επιλέγει όλες τις ζυγές σειρές ενός πίνακα */  
tr:nth-child(even) /* επιλέγει όλες τις ζυγές σειρές ενός πίνακα, χρησιμοποιώντας την λέξη κλειδί even */  
li:nth-child(1) /* επιλέγει το πρώτο list item */  
  
tr:nth-last-child(1) /* επιλέγει την τελευταία σειρά ενός πίνακα */  
  
img:nth-of-type(2n+1) { float: right; } /* επιλέγει όλα τα μονά images */  
img:nth-of-type(2n) { float: left; } /* επιλέγει όλα τα ζυγά images */  
  
img:nth-last-of-type(1){ border-bottom: 1px solid #000; } /* To τελευταίο image θα έχει border */  
  
li:last-child { color: red; } /* To τελευταίο list item θα έχει κόκκινο χρώμα */  
  
img:first-of-type { padding:10px; border:1px solid #000; } /* To πρώτο image θα έχει padding και border */  
  
p:last-of-type { font-size: 1.2em; } /* Η τελευταία παράγραφος θα έχει μεγαλύτερο font */  
  
li:only-child { list-style-type: square; } /* Σε μία λίστα με ένα και μοναδικό list item, το list item θα έχει τετραγωνάκι για τύπο λίστας */  
  
img:only-of-type { padding:10px; border:1px solid #000; } /* Το image που δεν έχει άλλα siblings ίδιου τύπου (images - img tags), θα έχει padding και border */  
  
p:empty { display: none; } /* Οι παράγραφοι που δεν έχουν child και text nodes δεν θα εμφανίζονται */  
  
h2:target { color;red; } /* Επιλέγει τους h2 τίτλους που είναι στόχοι κάποιου URI */ 

UI element states pseudo-classes

Στο CSS3 εμφανίζονται για πρώτη φορά και κάποιες – 3 για την ακρίβεια – User Interface ψευδοκλάσεις. Αυτές χρησιμοποιούνται κυρίως στις φόρμες (τουλάχιστον έτσι έχω καταλάβει, διορθώστε με εάν κάνω λάθος) και λειτουργούν ανάλογα με την κατάσταση του user interface του browser.

  1. Πιο συγκεκριμένα, με την ψευδοκλάση :enabled, επιλέγουμε το στοιχείο του περιβάλλοντος χρήσης το οποίο βρίσκεται σε ενεργοποιημένη κατάσταση στον browser.
  2. Αντίθετα με την ψευδοκλάση :disabled, επιλέγουμε το στοιχείο του περιβάλλοντος χρήσης το οποίο βρίσκεται σε απενεργοποιημένη κατάσταση στον browser.
  3. Τέλος υπάρχει και η ψευδοκλάση :checked η οποία επιλέγει τα radio και checkbox elements εάν είναι επιλεγμένα.

Patterns

  1. E:enabled
  2. E:disabled
  3. E:checked

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


input:enabled { background: red; }  
input:disabled { padding: 5px; border: 1px solid red; }  
input[type="checkbox"]:checked { background: red; }  

Negation pseudo-class

Μια πολύ σημαντική προσθήκη στο CSS3 ήταν και η πολυσυζητημένη negation ψευδοκλάση, που εξαιρεί τα elements που βρίσκονται μέσα στην παρένθεση. Μέσα στην παρένθεση μπορούμε να προσθέσουμε οποιονδήποτε απλό selector έτσι ώστε να εξαιρεθούν τα συγκεκριμένα elements από τον selector μας (λειτουργεί κατά κάποιον τρόπο σαν μια function που παίρνει για arguments απλούς selectors).

Pattern

  1. E:not(s)

Παράδειγμα


*:not(h1) { padding: 0; margin:0; }

General sibling combinator

Τέλος στο CSS3 προστέθηκε και ακόμα ένας πιο γενικός sibling combinator selector. Με το σύμβολο ~ λοιπόν, επιλέγουμε το δεύτερο element F (το element που εμφανίζεται δεξιά από το σύμβολο ~), το οποίο έχει κοινό γονιό (parent) με το το πρώτο element E (αυτό που βρίσκεται αριστερά από το σύμβολο ~) και εμφανίζεται στο DOM μετά από αυτό. Επειδή ίσως σας μπέρδεψα λίγο, ας δούμε μαζί το παρακάτω παράδειγμα. Στο παρακάτω παράδειγμα λοιπόν, το δεύτερο heading (h2) θα έχει κόκκινο χρώμα, μόνο εάν έχει κοινό γονιό με το h1 και εμφανίζεται στο DOM μετά από αυτό. Η διαφορά του με τον Adjacent sibling combinator (E + E) (που εμφανίστηκε στο CSS2 και παρουσιάστηκε στο προηγούμενο μέρος του άρθρου), είναι πως ο συγκεκριμένος κανόνας επιλέγει το δεύτερο element (το element που εμφανίζεται δεξιά από το σύμβολο +), έχει κοινό γονιό (parent) με το το πρώτο element (αυτό που βρίσκεται αριστερά από το σύμβολο +) και εμφανίζεται στο DOM ακριβώς μετά από αυτό (και όχι απλά μετά από αυτό).

Pattern

  1. E ~ F

Παράδειγμα


h1 ~ h2 { color: red; } /* ο δεύτερος header (h2) θα έχει κόκκινο χρώμα, ακόμα και στην παρακάτω markup. */  
  
<h1>H1 Header</h1>  
<p>Intro paragraph</p>  
<h2>H2 Header</h2> 

Επίλογος

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

Τέλος το CSS εξελίσσεται συνέχεια, και πιστεύω πως γρήγορα θα καταφέρει να γίνει και ένα πολύ καλό και web standard υποκατάστατο του Flash, οπότε όσο πιο πολλά γνωρίζετε γι’αυτό, τόσο πιο εύκολα θα μπορέσετε να συνεχίσετε προς αυτήν την κατεύθυνση.

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

Σημείωση : Το παρακάτω άρθρο γράφτηκε τον Φεβρουάριο του 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.

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

Patterns

  1. E[att] {}
  2. E[att=”val”] {}
  3. 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 οδηγίες.

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

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

Patterns

  1. E:first-child
  2. E:link
  3. E:visited
  4. E:hover
  5. E:active
  6. 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.

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

Patterns

  1. E::first-letter
  2. E::first-line
  3. E::before
  4. 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, οπότε μείνετε συντονισμένοι!

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 αντίστοιχα.