Εκπαιδευτικός Οδηγός Πseudo-Klass CSS

CSS Pseudo-classes

Οι pseudo-classes χρησιμοποιούνται για να καθορίσουν ειδικές καταστάσεις των στοιχείων.

Παράδειγμα, μπορεί να χρησιμοποιηθεί για:

  • Ρύθμιση στυλ όταν ο χρήστης κρατάει το ποντίκι πάνω στο στοιχείο.
  • Ρύθμιση διαφορετικών στυλ για προσβάσιμα και μη προσβάσιμα σύνδεσμοι.
  • Ρύθμιση στυλ όταν το στοιχείο αποκτά εστίαση.
  • Ρύθμιση στυλ για έγκυρα/μη έγκυρα/απαιτούμενα/προαιρετικά στοιχεία φόρμας.

Η παρακάτω τаблицή παρουσιάζει διαφορετικές pseudo-classes στο CSS:

Πseudo-classes Παράδειγμα Περιγραφή παραδείγματος
:active a:active Επιλέξτε ενεργές συνδέσεις.
:any-link a:anylink Επιλέξτε όλα τα στοιχεία <a> ή <area> με την ιδιότητα href.
:auto-fill input:autofill Επιλέξτε όλα τα στοιχεία <input> που γεμίζονται αυτόματα από τον περιηγητή.
:checked option:checked Συμμορφώνεται με όλα τα επιλεγμένα <input> ή <option> στοιχεία.
:default input:default Επιλέξτε την προεπιλεγμένη φόρμα για ένα σύνολο σχετικών στοιχείων.
:defined :defined Επιλέξτε όλα τα καθορισμένα στοιχεία (παράδειγμα ή προσαρμοσμένα στοιχεία).
:dir() :dir(rtl) Επιλέξτε όλα τα στοιχεία με καθορισμένη κατεύθυνση κειμένου.
:disabled option:disabled Επιλέξτε όλα τα απενεργοποιημένα στοιχεία, συχνά χρησιμοποιούμενα σε στοιχεία φόρμας.
:empty div:empty Επιλέξτε όλα τα στοιχεία χωρίς υποστοιχεία (συμπεριλαμβανομένων των κειμενικών κόμβων).
:enabled input:enabled Επιλέξτε όλα τα στοιχεία που είναι ενεργοποιημένα, συχνά χρησιμοποιείται σε στοιχεία φόρμας.
:first @page :first Αναπαράγει την πρώτη σελίδα του έντυπου που πρέπει να εκτυπωθεί (συνδυασμός με το rule @page).
:first-child p:first-child Επιλέξτε το στοιχείο που είναι ο πρώτος υποστοιχος του γονικού του στοιχείου (σε μια ομάδα αδελφών).
:first-of-type li:first-of-type Επιλέξτε το πρώτο στοιχείο μιας ομάδας αδελφών που είναι του συγκεκριμένου τύπου.
:focus select:focus Επιλέξτε το στοιχείο που έχει λάβει το εσόδιο, συχνά χρησιμοποιείται σε στοιχεία φόρμας.
:focus-visible button:focus-visible Επιλέξτε το στοιχείο που έχει λάβει το εσόδιο (μόνο όταν το εσόδιο εφαρμόζεται μέσω πλήκτρων και όχι του ποντικιού).
:focus-within form:focus-within Τα στοιχεία που είναι στο εσόδιο ή οποιοδήποτε απόγονο τους έχουν λάβει το εσόδιο.
:fullscreen :fullscreen Επιλέξτε το στοιχείο που βρίσκεται σε κατάσταση full-screen.
:has() h2:has(+p) Επιλέξτε το στοιχείο <h2> που ακολουθεί το στοιχείο <p> και εφαρμόστε στυλ στο <h2>.
:hover a:hover Επιλέξτε το στοιχείο που βρίσκεται σε κατάσταση mouseover.
:in-range input:in-range Επιλέξτε το στοιχείο <input> που έχει τιμή εντός του καθορισμένου ορίου.
:indeterminate input:indeterminate Επιλέξτε τα στοιχεία της φόρμας που βρίσκονται σε ασαφές στάδιο.
:invalid input:invalid Επιλέξτε τα στοιχεία της φόρμας που είναι μη έγκυρα.
:is() :is(ul, ol) Επιλέξτε όλα τα στοιχεία <ul> και <ol>.
:lang() p:lang(it) Επιλέξτε το στοιχείο <p> που έχει την ιδιότητα lang ως "it" (Ιταλικά).
:last-child li:last-child Επιλέξτε το στοιχείο <li> που είναι ο τελευταίος υποστοιχος του γονικού του στοιχείου.
:last-of-type p:last-of-type Επιλέξτε το στοιχείο <p> που είναι το τελευταίο στοιχείο του γονικού του στοιχείου.
:left @page :left Αναπαράγει όλες τις αριστερές σελίδες του έντυπου που πρέπει να εκτυπωθεί (συνδυασμός με το rule @page).
:link a:link Επιλέξτε όλους τους δεσμούς που δεν έχουν επισκεφθεί.
:modal :modal Επιλέξτε τα στοιχεία που βρίσκονται σε κατάσταση μοντέλου.
:not() :not(p) Επιλέξτε όλα τα στοιχεία που δεν είναι στοιχεία <p>.
:nth-child() p:nth-child(2) Επιλέξτε το στοιχείο <p> που είναι ο δεύτερος υποστοιχος του γονικού του στοιχείου.
:nth-last-child() p:nth-last-child(2) Επιλέγει το στοιχείο <p> που είναι το δεύτερο τελευταίο υποστοιχείο στο γονικό στοιχείο.
:nth-last-of-type() p:nth-last-of-type(2) Επιλέγει το στοιχείο <p> που είναι το δεύτερο τελευταίο στοιχείο στο γονικό στοιχείο.
:nth-of-type() p:nth-of-type(2) Επιλέγει το στοιχείο <p> που είναι το δεύτερο στοιχείο του γονικού στοιχείου.
:only-child p:only-child Επιλέγει το στοιχείο <p> που είναι ο μοναδικός υποστοιχείο στο γονικό στοιχείο.
:only-of-type p:only-of-type Επιλέγει το στοιχείο <p> που είναι το μοναδικό <p> στο γονικό στοιχείο.
:optional textarea:optional Επιλέγει τα στοιχεία <input>, <select> ή <textarea> χωρίς ιδιότητα required.
:out-of-range input:out-of-range Επιλέγει το στοιχείο <input> με τιμή που ξεπερνά το καθορισμένο εύρος.
:placeholder-shown input:placeholder-shown Επιλέγει το στοιχείο <input> ή <textarea> που εμφανίζει κείμενο占位符.
:popover-open :popover-open Επιλέγει το στοιχείο που βρίσκεται σε κατάσταση προβολής εμφάνισης.
:read-only input:read-only Επιλέγει τα στοιχεία εισόδου με ιδιότητα readonly.
:read-write input:read-write Επιλέγει τα στοιχεία εισόδου που είναι επεξεργαστέα.
:required input:required Επιλέγει τα στοιχεία εισόδου με ιδιότητα required.
:right @page :right Παρουσιάζει όλες τις δεξιές σελίδες του έγγραφου για εκτύπωση (μαζί με τη ρύθμιση @page).
:root :root Επιλέγει το ρίζα του έγγραφου.
:scope :scope Επιλέγει το στοιχείο που είναι σημείο αναφοράς ή εύρος για τον επιλογέα.
:state() :state() Επιλέγει το στοιχείο που έχει καθορισμένη προσαρμοσμένη κατάσταση.
:target :target Επιλέγει το στοιχείο στόχου που είναι ενεργό.
:user-invalid :user-invalid Επιλέγει τα στοιχεία φόρμας με μη έγκυρη τιμή (μετά την αλληλεπίδραση του χρήστη).
:user-valid :user-valid Επιλέγει τα στοιχεία φόρμας με έγκυρη τιμή (μετά την αλληλεπίδραση του χρήστη).
:valid input:valid Επιλέγει όλους τους στοιχεία εισόδου με έγκυρη τιμή.
:visited a:visited Επιλέξτε όλους τους επισκεπτόμενους συνδέσμους.
:where() :where(ol, ul) Επιλέξτε όλα τα στοιχεία <ul> και <ol>.