Μια ψευδο-κλάση (απλή άνω τελεία :) επιλέγει στοιχεία με βάση τη κατάστασή τους ή τη θέση τους — κάτι που δεν μπορεί να εκφραστεί με μια απλή κλάση, όπως "κατά τη διέλευση του δείκτη" ή "το πρώτο παιδί."
{ : blue; }
{ : solid; }
{ : (); }
{ : ; }
{ }
{ }
Η σειρά για τους συνδέσμους έχει σημασία (LVHA): :link, :visited, :hover, :active.
li:first-child { } /* first li among its siblings */
li:last-child { } /* last one */
li:nth-child(2) { } /* the 2nd */
li:nth-child(odd) { } /* 1st, 3rd, 5th... — zebra striping */
li:nth-child(3n) { } /* every 3rd */
p:only-child { } /* a p that's the sole child */
:nth-child() είναι ισχυρή — 2n (ζυγά), 2n+1 (περιττά), 3n (κάθε τρίτο), κ.λπ.
input:required { }
input:invalid { border-color: red; }
:is(h1, h2, h3) { } /* matches any — shortens selector lists */
.card:has(img) { } /* the "parent selector": a card that CONTAINS an img */
:not(.active) { } /* everything except .active */
Οι ψευδο-κλάσεις χρησιμοποιούν μία άνω τελεία (:hover, μια κατάσταση); τα ψευδο-στοιχεία χρησιμοποιούν δύο (::before, ένα δημιουργημένο μέρος). Μην τα συγχέετε.
Οι ψευδο-κλάσεις σας επιτρέπουν να διαμορφώσετε την αλληλεπίδραση (hover/focus — ουσιαστική για χρήσιμη, προσβάσιμη διεπαφή) και δομή (ριγώσεις, πρώτο/τελευταίο) χωρίς επιπλέον markup ή JavaScript.
Οι σύγχρονες (:has, :is, :focus-visible) επιλύουν προβλήματα που προηγουμένως απαιτούσαν JS ή επαναληπτικές επιλογές.