Οι ψευδοκλάσεις (pseudo-classes) χρησιμοποιούνται για να καθορίσουν ένα ειδικό κατάσταση ενός στοιχείου.
Για παράδειγμα, μπορούν να χρησιμοποιηθούν για:
- Να εφαρμόσουν στυλ σε ένα στοιχείο όταν ο χρήστης περνά το ποντίκι πάνω του (hover).
- Να εφαρμόσουν διαφορετικά στυλ σε συνδέσμους που έχουν ήδη επισκεφτείτε (visited) και σε συνδέσμους που δεν έχουν επισκεφτεί (unvisited).
- Να εφαρμόσουν στυλ σε ένα στοιχείο όταν αυτό λαμβάνει εστίαση (focus).
Οι ψευδοκλάσεις συνήθως προστίθενται στο τέλος του επιλογέα με τον χαρακτήρα “:”. Για παράδειγμα:
a:hover {
/* Στυλ για τον σύνδεσμο όταν ο χρήστης περνά το ποντίκι πάνω του */
}
a:visited {
/* Στυλ για τον επισκεφθέντα σύνδεσμο */
}
input:focus {
/* Στυλ για το πεδίο εισαγωγής όταν λαμβάνει εστίαση */
}
Με τη χρήση των ψευδοκλάσεων, μπορείτε να προσαρμόσετε την εμφάνιση των στοιχείων στις διάφορες καταστάσεις τους.
Οι ψευδοκλάσεις μπορούν να συνδυαστούν με τις κλάσεις HTML:
Όταν το ποντίκι περνά πάνω από τον σύνδεσμο στο παράδειγμα, θα αλλάξει το χρώμα του:
<a class="my-link" href="#">Hover over me</a>
.my-link:hover {
color: red;
}
Σε αυτό το παράδειγμα, ο σύνδεσμος έχει μια κλάση “my-link” και όταν ο χρήστης περνά το ποντίκι πάνω από τον σύνδεσμο, εφαρμόζεται η ψευδοκλάση :hover για να αλλάξει το χρώμα του συνδέσμου σε κόκκινο.
Αυτός ο συνδυασμός κλάσης και ψευδοκλάσης επιτρέπει την εφαρμογή στυλ σε στοιχεία με βάση την κατάσταση τους και την παρουσία συγκεκριμένων κλάσεων.
Ένα παράδειγμα χρήσης της ψευδοκλάσης :hover σε ένα στοιχείο <div>:
<div class="my-div">Hover over me</div>
.my-div:hover {
background-color: yellow;
}
Σε αυτό το παράδειγμα, ένα στοιχείο <div> έχει μια κλάση “my-div”. Όταν ο χρήστης περνά το ποντίκι πάνω από το στοιχείο, εφαρμόζεται η ψευδοκλάση :hover για να αλλάξει το χρώμα του φόντου του στοιχείου σε κίτρινο.
[adinserter block=”2″]
Αυτός ο τρόπος σας επιτρέπει να προσθέσετε διάφορες αλλαγές στην εμφάνιση του στοιχείου όταν ο χρήστης περνά το ποντίκι πάνω από αυτό.
Για να εμφανίσετε ένα στοιχείο <p> (όπως ένα tooltip) όταν ο χρήστης περνάει το ποντίκι πάνω από ένα στοιχείο <div>, μπορείτε να χρησιμοποιήσετε την ψευδοκλάση :hover και να εφαρμόσετε στυλ στο στοιχείο <p>.
Ας δούμε το παράδειγμα:
<style>
.tooltip {
position: relative;
display: inline-block;
cursor: pointer;
}
.tooltip:hover .tooltiptext {
display: block;
}
.tooltiptext {
display: none;
position: absolute;
background-color: yellow;
padding: 5px;
border-radius: 3px;
top: 100%;
left: 0;
width: 150px;
}
</style>
<div class="tooltip">
Hover over me
<p class="tooltiptext">This is a tooltip</p>
</div>
Σε αυτό το παράδειγμα, ο στοιχείο <div> έχει μια κλάση “tooltip”. Όταν ο χρήστης περνάει το ποντίκι πάνω από το <div>, εφαρμόζεται η ψευδοκλάση :hover, και το στοιχείο <p> με κλάση “tooltiptext” εμφανίζεται.
Το στοιχείο <p> που λειτουργεί ως tooltip έχει το στυλ display: none για να αρχικά μην εμφανίζεται. Όταν εφαρμόζεται η ψευδοκλάση :hover στον γονικό <div>, τότε το <p> εμφανίζεται με το στυλ display: block.
Μπορείτε να προσαρμόσετε τα στυλ και το περιεχόμενο του tooltip σύμφωνα με τις ανάγκες σας.
Η ψευδοκλάση :first-child ταιριάζει σε ένα συγκεκριμένο στοιχείο που είναι το πρώτο παιδί ενός άλλου στοιχείου.
Για να ταιριάξετε το πρώτο στοιχείο <p>, μπορείτε να χρησιμοποιήσετε την ψευδοκλάση :first-child με τον επιθυμητό έλεγχο επιλογής.
Ας δούμε ένα παράδειγμα:
<style>
p:first-child {
color: red;
}
</style>
<div>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<p>This is the third paragraph.</p>
</div>
Σε αυτό το παράδειγμα, το στυλ color: red; εφαρμόζεται στο πρώτο στοιχείο <p>, δηλαδή το “This is the first paragraph.”.
Η ψευδοκλάση :first-child επιλέγει μόνο τα στοιχεία που είναι το πρώτο παιδί του γονικού τους στοιχείου. Εάν θέλετε να επιλέξετε το πρώτο <p> σε οποιοδήποτε επίπεδο εντός του γονικού στοιχείου, μπορείτε να χρησιμοποιήσετε τη σύνταξη div > p:first-child.
Για να ταιριάξετε το πρώτο στοιχείο <i> σε κάθε στοιχείο <p>, μπορείτε να συνδυάσετε την ψευδοκλάση :first-child με τον επιλογέα ποταμίσματος (>). Ας δούμε ένα παράδειγμα:
<style>
p > i:first-child {
color: blue;
}
</style>
<div>
<p><i>This is the first italic element.</i> This is some text.</p>
<p><i>This is another italic element.</i> This is some more text.</p>
</div>
Σε αυτό το παράδειγμα, το στυλ color: blue; εφαρμόζεται στο πρώτο στοιχείο <i> σε κάθε στοιχείο <p>. Δηλαδή, το “This is the first italic element.” θα έχει μπλε χρώμα, ενώ το “This is another italic element.” θα έχει το προεπιλεγμένο χρώμα.
[adinserter block=”3″]
Η σύνταξη p > i:first-child επιλέγει το πρώτο <i> παιδί σε κάθε στοιχείο <p>.
Για να ταιριάξετε όλα τα στοιχεία <i> σε στοιχεία <p> που είναι το πρώτο παιδί άλλου στοιχείου, μπορείτε να συνδυάσετε την ψευδοκλάση :first-child με τον επιλογέα ποταμίσματος (>). Ας δούμε ένα παράδειγμα:
<style>
:first-child > p > i {
color: blue;
}
</style>
<div>
<p><i>This is the first italic element.</i> This is some text.</p>
<p><i>This is another italic element.</i> This is some more text.</p>
</div>
Σε αυτό το παράδειγμα, το στυλ color: blue; εφαρμόζεται σε όλα τα στοιχεία <i> που βρίσκονται μέσα σε στοιχεία <p>, τα οποία είναι το πρώτο παιδί ενός άλλου στοιχείου. Δηλαδή, και τα “This is the first italic element.” και “This is another italic element.” θα έχουν μπλε χρώμα.
Η ψευδοκλάση :lang σας επιτρέπει να ορίσετε ειδικούς κανόνες για διάφορες γλώσσες.
Στο παρακάτω παράδειγμα, η :lang ορίζει τα εισαγωγικά για τα στοιχεία <q> με την ιδιότητα lang="no":
<style>
q:lang(no) {
quotes: "«" "»";
}
</style>
<p>This is a <q lang="en">quote in English</q>.</p>
<p>This is a <q lang="no">quote in Norwegian</q>.</p>
Σε αυτό το παράδειγμα, ορίζεται ο κανόνας quotes: "«" "»"; για τα στοιχεία <q> με την ιδιότητα lang="no". Αυτό σημαίνει ότι τα εισαγωγικά για τα στοιχεία <q> με γλώσσα “no” θα είναι «και»» (αντί για τα προεπιλεγμένα εισαγωγικά). Έτσι, το “This is a quote in Norwegian” θα εμφανιστεί ως «quote in Norwegian».
Παρακάτω παραθέτω τις ψευδείς κλάσεις (pseudo classes) της CSS, με τα παραδείγματα και μια περιγραφή για κάθε μία από αυτές:
| Επιλογέας | Παράδειγμα | Περιγραφή παραδείγματος |
|---|---|---|
| :active | a:active | Επιλέγει το ενεργό σύνδεσμο (link) |
| :checked | input:checked | Επιλέγει κάθε επιλεγμένο στοιχείο |
| :disabled | input:disabled | Επιλέγει κάθε απενεργοποιημένο στοιχείο |
| :empty | p:empty | Επιλέγει κάθε στοιχείο που δεν έχει παιδιά |
| :enabled | input:enabled | Επιλέγει κάθε ενεργοποιημένο στοιχείο |
| :first-child | p:first-child | Επιλέγει κάθε στοιχείο που είναι το πρώτο παιδί του γονικού του |
| :first-of-type | p:first-of-type | Επιλέγει το πρώτο στοιχείο που είναι το πρώτο στοιχείο του γονικού του |
| :focus | input:focus | Επιλέγει το στοιχείο που έχει εστιάσεις |
| :hover | a:hover | Επιλέγει συνδέσμους (links) κατά το πέρασμα του δείκτη πάνω τους |
| :in-range | input:in-range | Επιλέγει τα στοιχεία με μια τιμή εντός ενός καθορισμένου εύρους |
| :invalid | input:invalid | Επιλέγει όλα τα στοιχεία με μη έγκυρη τιμή |
| :lang(language) | p:lang(it) | Επιλέγει κάθε στοιχείο <p> με γλώσσα (lang) που ξεκινά με “it” |
| :last-child | p:last-child | Επιλέγει κάθε στοιχείο <p> που είναι το τελευταίο παιδί του γονικού του |
| :last-of-type | p:last-of-type | Επιλέγει το τελευταίο στοιχείο <p> που είναι το τελευταίο <p> στοιχείο του γονικού του |
| :link | a:link | Επιλέγει όλους τους μη επισκεφθέντες συνδέσμους (links) |
| :not(selector) | :not(p) | Επιλέγει κάθε στοιχείο που δεν είναι στοιχείο <p> |
| :nth-child(n) | p:nth-child(2) | Επιλέγει κάθε στοιχείο <p> που είναι το δεύτερο παιδί του γονικού του |
| :nth-last-child(n) | p:nth-last-child(2) | Επιλέγει κάθε στοιχείο <p> που είναι το δεύτερο παιδί του γονικού του, μετρώντας από το τέλος |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | Επιλέγει το δεύτερο στοιχείο <p> που είναι το δεύτερο <p> στοιχείο του γονικού του, μετρώντας από το τέλος |
| :nth-of-type(n) | p:nth-of-type(2) | Επιλέγει το δεύτερο στοιχείο <p> που είναι το δεύτερο <p> στοιχείο του γονικού του |
| :only-of-type | p:only-of-type | Επιλέγει κάθε στοιχείο <p> που είναι το μοναδικό <p> στοιχείο του γονικού του |
| :only-child | p:only-child | Επιλέγει κάθε στοιχείο <p> που είναι το μοναδικό παιδί του γονικού του |
| :optional | input:optional | Επιλέγει τα στοιχεία <input> χωρίς το χαρακτηριστικό “required” |
| :out-of-range | input:out-of-range | Επιλέγει τα στοιχεία <input> με τιμή εκτός καθορισμένου εύρους |
| :read-only | input:read-only | Επιλέγει τα στοιχεία <input> με το χαρακτηριστικό “readonly” |
| :read-write | input:read-write | Επιλέγει τα στοιχεία <input> χωρίς το χαρακτηριστικό “readonly” |
| :required | input:required | Επιλέγει τα στοιχεία <input> με το χαρακτηριστικό “required” |
| :root | :root | Επιλέγει το ριζικό στοιχείο του έγγραφου |
| :target | #news:target | Επιλέγει το τρέχον ενεργό στοιχείο #news (που έχει κλικ από ένα URL που περιέχει αυτό το αγκύλη) |
| :valid | input:valid | Επιλέγει όλα τα στοιχεία <input> με έγκυρη τιμή |
| :visited | a:visited | Επιλέγει όλους τους επισκεφθέντες συνδέσμους (links) |