Σε αυτό το τελευταίο εκπαιδευτικό επιλογέα σας παρουσιάζω μια πολύ ειδική μορφή επιλογέων. Πρόκειται για τις λεγόμενες ψευδοκλάσεις και ψευδοστοιχεία. Αυτοί είναι οι επιλογείς που δεν αναφέρονται σε συγκεκριμένα στοιχεία HTML, αλλά δημιουργούνται από τη συσκευή εξόδου.
Με τις ψευδοκλάσεις και τα ψευδοστοιχεία, μπορούν να καθοριστούν δηλώσεις για τα τμήματα HTML που δεν περιγράφονται μοναδικά με ένα στοιχείο HTML. Συνηθισμένα παραδείγματα περιλαμβάνουν έναν υπερσύνδεσμο που μόλις επιλέχθηκε ή έναν υπερσύνδεσμο που δεν έχει ακόμα επισκεφθεί.
Διαμορφώνοντας υπερσυνδέσμους
Πολύ συχνά θέλουμε να διαμορφώσουμε τους υπερσυνδέσμους της σελίδας. Το CSS προσφέρει πολλές επιλογές για να αντιμετωπίσουμε τις διάφορες καταστάσεις των υπερσυνδέσμων και να τους προσαρμόσουμε οπτικά.
Αν θέλετε να αντιστοιχίσετε, για παράδειγμα, έναν υπερσύνδεσμο με κόκκινο χρώμα, η σύνταξη θα ήταν ως εξής:
a:link {
color: red;
}
Με το a:visited, τα ήδη επισκεφθέντα υπερστοιχεία επισημαίνονται. Με την ακόλουθη σύνταξη μπορείτε να εμφανίσετε αυτούς τους υπερσυνδέσμους που έχουν ήδη κλικαριστεί σε μπλε χρώμα.
a:visited {
color: blue;
text-decoration:none;
}Στον περιηγητή φαίνεται έτσι:
Αν θέλετε να διαμορφώσετε ξεχωριστά τους υπερσυνδέσμους που είναι σε διαδικασία κλικ, αυτό είναι επίσης δυνατό.
a:active {
font-weight: bold;
color: blue;
text-decoration: none;
}
Χρησιμοποιείται η σύνταξη a:active. 
Η συνταγή a:hover αναφέρεται στην κατάσταση όπου το ποντίκι περνά πάνω από τον υπερσύνδεσμο. Επιπλέον, με το a:focus υπάρχει ένα άλλο ψευδοστοιχείο. Αυτό περιγράφει τη στιγμή που ο υπερσύνδεσμος λαμβάνει την εστίαση.
Περισσότερα ψευδοστοιχεία
Υπάρχουν ψευδοστοιχεία με τα οποία μπορούν να αντιμετωπιστούν τμήματα άλλων στοιχείων. Ένα τυπικό παράδειγμα είναι ::first-letter. Αυτό το ψευδοστοιχείο επιλέγει το πρώτο χαρακτήρα του τρέχοντος στοιχείου. Μπορεί να χρησιμοποιηθεί για όλα τα στοιχεία που περιέχουν κείμενο. Αλλά προσοχή: τα ψευδοστοιχεία πρέπει να είναι γραμμένα μόνο στο τέλος όλων των επιλογέων. Έτσι, πρέπει να βρίσκονται πριν από την άνοιξη της αγκυλωτής παρενθέσεως.
h1::first-letter {
color: blue;
}
Με το ::first-line μπορεί να επιλεγεί η πρώτη γραμμή ενός στοιχείου. Αυτό το ψευδοστοιχείο εφαρμόζεται αποκλειστικά σε στοιχεία επιπέδου μπλοκ. Ένα παράδειγμα:
p::first-line {
background-blue;
}
Και εδώ είναι το αποτέλεσμα στον περιηγητή:
ένα
Με τα δύο ψευδοστοιχεία :after και :before μπορούν να εισαχθούν επιπλέον περιεχόμενα πριν και μετά από ένα στοιχείο. Με το content καθορίζεται τι πρέπει να εμφανιστεί.
• normal – το προεπιλεγμένο ψευδοστοιχείο δεν δημιουργείται.
• none – το ψευδοστοιχείο δεν δημιουργείται.
• <string> – εμφανίζεται η συμβολοσειρά που ορίζεται εδώ. Οι συμβολοσειρές πρέπει να τοποθετούνται με ενιαία ή διπλά εισαγωγικά.
• <uri> – εισάγεται η πόρος που ορίζεται από το URI.
• <counter> – καθορίζει ένα μετρητή ή αναφέρει έναν συγκεκριμένο μετρητή.
• attr(<identifier>) – εισάγεται η τιμή του χαρακτηριστικού που ορίζεται στις παρενθέσεις.
• close-quote – εισάγει μια κλειστή εισαγωγική.
• no-close-quote – δεν εισάγεται κλειστή εισαγωγική, αυξάνεται ωστόσο η βάθηση της εμφωλευμένης δομής κατά ένα.
• no-open-quote – δεν εισάγεται ανοιχτή εισαγωγή, αυξάνεται ωστόσο η βάθηση της εμφωλευμένης δομής κατά ένα.
• open-quote – εισάγει μια ανοιχτή εισαγωγική.
Ένα παράδειγμα:
ul li:before {
content: uri("bullet.gif");
}
Με το CSS3 εισήχθη επίσης ο ψευδοεπιλογέας :not. Με αυτόν μπορούν να επιλεγούν πολύ εύκολα ειδικά περιεχόμενα. Ένα πρώτο παράδειγμα θα δείξει πόσο ισχυρός είναι πραγματικά αυτός ο ψευδοεπιλογέας. Ας υποθέσουμε ότι θέλετε να επιλέξετε όλους τους υπερσυνδέσμους που δεν έχουν το χαρακτηριστικό href. Η αντίστοιχη σύνταξη θα ήταν ως εξής:
a:not([href])
Οι "κανονικοί" υπερσύνδεσμοι δε θα επηρεαστούν από αυτή τη σύνταξη. Ωστόσο, μπορείτε να έχετε πρόσβαση στους ορισμούς αγκώνων με αυτήν.
<a name="top">Αρχή σελίδας</a>
Ένα πιο λεπτομερές παράδειγμα θα δείξει τη δύναμη του :not. Μέσα σε ένα έγγραφο ορίστηκαν διάφοροι παράγραφοι κειμένου.
<body> <h1>PSD-Tutorials.de</h1> <p>Αυτό είναι ένα τμήμα.</p> <p>Αυτό είναι άλλο ένα τμήμα.</p> <div>Αυτό είναι ένα τμήμα κειμένου.</div> <a href="http://www.psd-tutorials.de" target="_blank">PSD-Tutorials.de</a> </body>
Εκτός από τα κείμενα που σημειώνονται με p, υπάρχει επίσης μια περιοχή div και ένας υπερσύνδεσμος. Τώρα θα πρέπει να συμβεί το εξής:
• Όλοι οι παράγραφοι που είναι επισημασμένοι με το p να έχουν μαύρο χρώμα κειμένου.
• Σε όλα τα σημεία που δεν υπάρχουν παράγραφοι p, να χρησιμοποιείται κόκκινο χρώμα κειμένου.
Η αντίστοιχη σύνταξη CSS φαίνεται ως εξής:
p {
color:#000;
}
:not(p) {
color:#ff0000;
}Η αρχή της κληρονομιάς
Ένα από τα πιο σημαντικά πράγματα όταν πρόκειται για την κατανόηση των ορισμών CSS είναι η κληρονομιά. Πράγματι, στο CSS, οι ιδιότητες στυλ κληρονομούνται από ένα στοιχείο σε ένα άλλο.
Ένα παράδειγμα:
html {
color: red
}Με αυτόν τον καθορισμό, το στοιχείο html ανατίθεται το κόκκινο χρώμα μπροστά. 
Λόγω της αρχής της κληρονομιάς, αυτός ο καθορισμός χρώματος ισχύει πρώτα για όλα τα στοιχεία που υποκείνται στο html. Έτσι, από προεπιλογή όλα τα στοιχεία που είναι υποκείμενα στο html εμφανίζονται πρώτα κόκκινα. Πλεονεκτήματος αυτής της μεθόδου: Για αυτά τα στοιχεία δεν χρειάζεται να ορίσετε ροζ χρώμα ως χρώμα. Αλλά, αν δεν πρέπει να εμφανίζονται σε ροζ χρώμα τα περιεχόμενα των παραγράφων p; Τότε πρέπει να αντικαταστήσετε τον προκαθορισμένο ορισμό του χρώματος από το html.
html {
color: red;
}
p {
color: #000;
}
Τι συμβαίνει όταν υπάρχουν τώρα δύο στοιχεία p και div;
<body> <p>PSD-Tutorials.de</p> <div>Κόσμος</div> </body>
Το αποτέλεσμα είναι το εξής:
Ο καθορισμός χρώματος του html επηρεάζει αποκλειστικά το περιεχόμενο του div. Αντίθετα, η παράγραφος p εμφανίζεται με μαύρο κείμενο.
Στο CSS υπάρχουν διαφορετικοί τρόποι για τον καθορισμό των ορισμών στυλ. Για αυτόν τον λόγο, μπορεί να υπάρχουν αντιφατικές οδηγίες για ένα στοιχείο. Για τέτοιες περιπτώσεις, το CSS προβλέπει ένα αρχή βαρύτητας. Με βάση αυτήν την αρχή, είναι σαφώς καθορισμένο ποιες από τις οδηγίες έχουν προτεραιότητα για ένα στοιχείο. Δεν θέλω αυτή την στιγμή να εξετάσω λεπτομερώς αυτήν την αρχή. Ωστόσο, μπορείτε να βρείτε λεπτομερείς πληροφορίες γι' αυτήν στη σελίδα http://wiki.selfhtml.org/wiki/CSS/Kaskade ή επίσης στο http://www.thestyleworks.de/basics/cascade.shtml.
Αυτό που θέλω να αποδείξω, είναι τι πρέπει να προσέξετε όταν καθορίζετε τις ιδιότητες CSS. Για αυτό σκοπό, χρησιμοποιείται το παρακάτω παράδειγμα:
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
body {
font-family:Arial, Helvetica, sans-serif;
font-size: 90%;
}
p {
color: #000;
}
h1 {
font-size: 120%;
font-weight: normal;
}
strong {
color:#CCCCCC;
}
h2 strong {
color: red;
}
</style>
</head>
<body>
<div>
<h1>PSD-Tutorials.de</h1>
<p>Αυτή είναι μια παράγραφος με ένα <strong>έντονη λέξη</strong>.</p>
<h2>Αυτή είναι μια επικεφαλίδα με ένα <strong>έντονη λέξη</strong>.</h2>
</div>
</body>
</html>Στον περιηγητή, φαίνεται ως εξής:
Όπως μπορείτε να δείτε, οι λέξεις που είναι επισημασμένες με strong διαμορφώνονται διαφορετικά. Η μορφοποίηση που εφαρμόζεται εξαρτάται τελικά από τη σειρά των ορισμών.
Ως εναλλακτική λύση, υπάρχει επίσης τη λέξη-κλειδί !σημαντικό, μέσω της οποίας μπορείτε να χαρακτηρίσετε μια οδηγία CSS ως ιδιαίτερα σημαντική.
<style>
body {
font-family:Arial, Helvetica, sans-serif;
font-size: 90%;
}
p {
color: #000;
}
h1 {
font-size: 120%;
font-weight: normal;
}
strong {
color:#CCCCCC !important;
}
h2 strong {
color: red;
}
</style>Εδώ πάλι μια ματιά στο αποτέλεσμα:
Διαβάστε σίγουρα και τις πηγές που αναφέρθηκαν σε αυτό το εγχειρίδιο. (Ακόμα κι αν απαιτείται να μην εμβαθύνετε πολύ σε αυτήν τη θεματολογία στην αρχή).
