Οι CSS pseudo-classes (ψευδοκλάσεις) χρησιμοποιούνται για την προσθήκη ειδικών εφέ σε ορισμένους επιλογείς.
Δεν χρειάζεται να χρησιμοποιήσετε JavaScript ή οποιοδήποτε
άλλο script για να χρησιμοποιήσετε αυτά τα εφέ οπότε είναι μια πολύ χρήσιμη πρακτική για την δημιουργία ιστοσελίδων
Μια απλή σύνταξη pseudo-classes είναι η εξής:
selector:pseudo-class {property: value}
Οι κλάσεις CSS μπορούν επίσης να χρησιμοποιηθούν με pseudo classes:
selector.class:pseudo-class {property: value}
Οι πιο συχνά χρησιμοποιούμενες pseudo classes είναι οι εξής:
| A/A | Value (Τιμή) & Περιγραφή |
|---|---|
| 1 | :link
Το χρησιμοποιούμε για να προσθέσουμε ειδικό στυλ σε |
| 2 | :visited
Το χρησιμοποιούμε για να προσθέσουμε ειδικό στυλ σε |
| 3 | :hover
Χρησιμοποιούμε αυτήν την κλάση για να προσθέσουμε ειδικό στυλ σε ένα στοιχείο όταν περνάμε το ποντίκι πάνω του. |
| 4 | :active
Χρησιμοποιούμε αυτήν την κλάση για να προσθέσουμε ειδικό στυλ σε ένα |
| 5 | :focus
Χρησιμοποιούμε αυτήν την κλάση για να προσθέσουμε ειδικό στυλ σε ένα |
| 6 | :first-child
Χρησιμοποιούμε αυτήν την κλάση για να προσθέσουμε ειδικό στυλ σε ένα |
| 7 | :lang
Χρησιμοποιούμε αυτήν την κλάση για να καθορίσουμε μια γλώσσα που θα |
Κατά τον ορισμό ψευδοκλάσεων σε ένα μπλοκ <style>…</style>, πρέπει να
σημειωθούν τα ακόλουθα:
- Το a:hover ΠΡΕΠΕΙ να έρχεται μετά από a:link και a:visited στον ορισμό CSS για να είναι αποτελεσματικό.
- Το a:active ΠΡΕΠΕΙ να έρχεται μετά το a:hover στον ορισμό CSS για να είναι αποτελεσματικό.
- Τα ονόματα των ψευδοκλάσεων δεν κάνουν διάκριση πεζών-κεφαλαίων.
- Οι ψευδοκλάσεις είναι διαφορετικές από τις κλάσεις CSS, αλλά μπορούν να συνδυαστούν.
Η ψευδοκλάση :link
Το ακόλουθο παράδειγμα δείχνει πώς να χρησιμοποιήσετε την κλάση :link για να ορίσετε το χρώμα του συνδέσμου. Πιθανές τιμές θα μπορούσαν να είναι οποιοδήποτε όνομα χρώματος σε οποιαδήποτε έγκυρη μορφή.
Η ψευδοκλάση :visited
Το παρακάτω παράδειγμα μας δείχνει πώς να χρησιμοποιήσετε την κλάση :visited για να ορίσετε το χρώμα των συνδέσμων που έχετε επισκεφθεί. Πιθανές τιμές θα μπορούσαν να είναι οποιοδήποτε όνομα χρώματος σε οποιαδήποτε έγκυρη μορφή.
Αυτό θα δημιουργήσει τον ακόλουθο σύνδεσμο. Μόλις κάνετε κλικ σε αυτόν τον σύνδεσμο, θα αλλάξει το χρώμα του σε πράσινο.
Η ψευδoκλάση :hover
Το ακόλουθο παράδειγμα δείχνει πώς να χρησιμοποιήσετε την κλάση :hover για να αλλάξετε το χρώμα των συνδέσμων όταν φέρνουμε έναν δείκτη του ποντικιού πάνω από αυτόν τον σύνδεσμο. Πιθανές τιμές θα μπορούσαν να είναι οποιοδήποτε όνομα χρώματος σε οποιαδήποτε έγκυρη μορφή.
Η ψευδοκλάση :active
Το ακόλουθο παράδειγμα δείχνει πώς να χρησιμοποιήσετε την κλάση :active για να αλλάξετε το χρώμα των ενεργών συνδέσμων. Πιθανές τιμές θα μπορούσαν να είναι οποιοδήποτε όνομα χρώματος σε οποιαδήποτε έγκυρη μορφή.
Η ψευδοκλάση :focus
Το ακόλουθο παράδειγμα δείχνει πώς να χρησιμοποιήσετε την κλάση :focus για να αλλάξετε το χρώμα των εστιασμένων συνδέσμων. Πιθανές τιμές θα μπορούσαν να είναι οποιοδήποτε όνομα χρώματος σε οποιαδήποτε έγκυρη μορφή.
H ψευδοκλάση :first-child
Η ψευδο-κλάση :first-child ταιριάζει με ένα καθορισμένο στοιχείο που είναι το πρώτο παιδί ενός άλλου στοιχείου και προσθέτει ειδικό στυλ σε αυτό το στοιχείο που είναι το πρώτο παιδί κάποιου άλλου στοιχείου. Για να γίνει η εργασία :first-child στον IE <!DOCTYPE> πρέπει να δηλωθεί στην κορυφή του εγγράφου.
Για παράδειγμα, για να δημιουργήσετε εσοχές στην πρώτη παράγραφο όλων των στοιχείων <div>, θα μπορούσατε να χρησιμοποιήσετε αυτόν τον ορισμό:
Θα έχουμε το ακόλουθο αποτέλεσμα:
Η ψευδοκλάση :lang
Η ψευδο-κλάση :lang, επιτρέπει τη δημιουργία επιλογέων με βάση τη ρύθμιση γλώσσας για συγκεκριμένες ετικέτες.
Αυτή η κλάση είναι χρήσιμη σε έγγραφα που απευθύνονται σε πολλές γλώσσες που έχουν διαφορετικούς κανόνες για συγκεκριμένες γλωσσικές δομές. Για παράδειγμα, η γαλλική γλώσσα χρησιμοποιεί συνήθως αγκύλες (< και >) για σκοπούς αναφοράς, ενώ η αγγλική γλώσσα χρησιμοποιεί εισαγωγικά (‘ και ‘).
Σ’ ένα έγγραφο που πρέπει να αντιμετωπίσει αυτή τη διαφορά, μπορείτε να χρησιμοποιήσετε την ψευδο-κλάση :lang για να αλλάξετε κατάλληλα τα εισαγωγικά. Ο παρακάτω κώδικας αλλάζει την ετικέτα <blockquote> κατάλληλα για τη γλώσσα που χρησιμοποιείται.
Οι επιλογείς :lang θα εφαρμοστούν σε όλα τα στοιχεία του εγγράφου. Ωστόσο, δεν χρησιμοποιούν όλα τα στοιχεία την ιδιότητα της παράθεσης, επομένως το εφέ δεν θα είναι εμφανή για τα περισσότερα στοιχεία.
Στο παράδειγμά μας, θα έχουμε το εξής αποτέλεσμα:
...<< A quote in a paragraph >>...
Μπορείτε να μάθετε περισσότερα για την css στην αντίστοιχη θεματική κατηγορία μας στο blog μας που μπορείτε να βρείτε εδώ ενώ το Εργαστήριο ΤΠΕ Ήρων – Lab ICT Heron πολύ συχνά διοργανώνει σεμινάρια εξ΄αποστάσεως εκ των οποίων κάποια είναι δωρεάν και κάποια με μικρή αμοιβή όταν τα συνδιοργανώνει με κάποιον εξωτερικό φορέα.
Μετάφραση: Νίκος Τσοχαταρίδης, Μαρία Νάσταρη
Πηγή: tutorialspoint.com
