Τι είναι οι ψευδο-κλάσεις στο CSS;

Οι ψευδο-κλάσεις στο CSS είναι λέξεις-κλειδιά που προστίθενται στους επιλεκτές για να δηλώσουν μια ιδιαίτερη κατάσταση του στοιχείου. Επιτρέπουν την εφαρμογή στυλ σε στοιχεία βάσει της αλληλεπίδρασής τους με τον χρήστη, της θέσης τους στη δομή του εγγράφου ή άλλων χαρακτηριστικών που δεν μπορούν να εκφραστούν με τυπικούς επιλεκτές.

Παραδείγματα ψευδο-κλάσεων:

• Καταστάσεις χρήστη:

  • :hover - στοιχείο πάνω στο οποίο περνάει ο δείκτης του ποντικιού.
  • :active - στοιχείο που ενεργοποιείται (π.χ., ένα κουμπί που πατιέται).
  • :focus - στοιχείο που βρίσκεται σε εστίαση εισόδου (π.χ., ένα πεδίο κειμένου).
  • :visited - σύνδεσμος που έχει ήδη επισκεφθεί ο χρήστης.
  • :link - σύνδεσμος που ο χρήστης δεν έχει επισκεφθεί ακόμα.

• Θέση στη δομή:

  • :first-child - πρώτο παιδί του γονέα.
  • :last-child - τελευταίο παιδί του γονέα.
  • :nth-child(n) - n-ο παιδί.
  • :first-of-type - πρώτο στοιχείο του τύπου του ανάμεσα στα παιδιά.
  • :last-of-type - τελευταίο στοιχείο του τύπου του ανάμεσα στα παιδιά.

• Άλλα:

  • :empty - στοιχείο χωρίς παιδιά ή κείμενο.
  • :not(selector) - στοιχεία που δεν ταιριάζουν με τον δοσμένο επιλεκτή.

Σύνταξη:

selector:pseudo-class {
  property: value;
}

Παράδειγμα χρήσης:

/* Αλλαγή χρώματος κειμένου όταν περνάει ο δείκτης πάνω από μια παράγραφο */
p:hover {
  color: blue;
}

/* Στυλ για το πρώτο στοιχείο λίστας */
li:first-child {
  font-weight: bold;
}

Οι ψευδο-κλάσεις επεκτείνουν τις δυνατότητες των επιλεκτών, επιτρέποντας τη δημιουργία πιο δυναμικών και διαδραστικών διεπαφών χωρίς τη χρήση JavaScript για απλές αλλαγές στυλ.