Περιγράψτε τις ψευδοκλάσεις και τα ψευδο-στοιχεία στο…

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

Ψευδοκλάσεις

Οι ψευδοκλάσεις ξεκινούν με ένα μονό άνω κάτω τελεία (:). Χρησιμοποιούνται για το στυλ ενός στοιχείου σε μια συγκεκριμένη κατάσταση.

Βασικές ψευδοκλάσεις:

:hover - στυλ σε στοιχείο κατά την οδήγηση του ποντικιού.
:active - στυλ σε στοιχείο κατά τη διάρκεια κλικ (ενεργοποίηση).
:focus - στυλ σε στοιχείο που βρίσκεται αυτήν τη στιγμή σε εστίαση (π.χ. μετά από μετάβαση σε σύνδεσμο ή κλικ σε πεδίο εισαγωγής).
:visited - στυλ σε επισκεπτόμενο σύνδεσμο.
:link - στυλ σε μη επισκεπτόμενο σύνδεσμο.
:first-child - στυλ στο πρώτο παιδικό στοιχείο του γονέα.
:last-child - στυλ στο τελευταίο παιδικό στοιχείο του γονέα.
:nth-child(n) - στυλ στο n-ο παιδικό στοιχείο του γονέα. Το n μπορεί να είναι αριθμός, λέξη-κλειδί (even, odd) ή έκφραση (2n+1).
:nth-last-child(n) - στυλ στο n-ο παιδικό στοιχείο του γονέα, μετρημένο από το τέλος.
:not(selector) - στυλ σε στοιχεία που δεν ταιριάζουν με τον καθορισμένο επιλεκτή.

/* Παράδειγμα χρήσης ψευδοκλάσεων */
a:hover {
  color: blue; // Αλλαγή χρώματος συνδέσμου κατά την οδήγηση
}

input:focus {
  border-color: green; // Αλλαγή χρώματος πλαισίου πεδίου εισαγωγής σε εστίαση
}

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

Ψευδοστοιχεία

Τα ψευδοστοιχεία ξεκινούν με διπλό άνω κάτω τελεία (::). Χρησιμοποιούνται για το στυλ συγκεκριμένου μέρους ενός στοιχείου ή για την εισαγωγή γενεθλιωμένου περιεχομένου πριν ή μετά το περιεχόμενο του στοιχείου.

Βασικά ψευδοστοιχεία:

::before - εισάγει γενεθλιωμένο περιεχόμενο πριν από το περιεχόμενο του στοιχείου. Συχνά χρησιμοποιείται με την ιδιότητα content.
::after - εισάγει γενεθλιωμένο περιεχόμενο μετά το περιεχόμενο του στοιχείου. Απαιτεί επίσης την ιδιότητα content.
::first-letter - στυλ στην πρώτη γράμμα του κειμένου.
::first-line - στυλ στην πρώτη γραμμή του κειμένου.
::selection - στυλ στο μέρος του στοιχείου που έχει επιλεγεί από τον χρήστη.

/* Παράδειγμα χρήσης ψευδοστοιχείων */
p::first-letter {
  font-size: 2em; // Μεγέθυνση του πρώτου γράμματος της παραγράφου
  font-weight: bold;
}

h2::after {
  content: " ---"; // Προσθήκη κειμένου μετά τον τίτλο
  color: gray;
}

mark::selection {
  background-color: yellow; // Αλλαγή φόντου επιλεγμένου κειμένου
  color: black;
}

Ιστορικά, οι ψευδοκλάσεις χρησιμοποίησαν το μονό άνω κάτω τελεία (:) για συμβατότητα με το CSS2.1, ενώ τα ψευδοστοιχεία στο CSS3 άρχισαν να χρησιμοποιούν το διπλό άνω κάτω τελεία (::) για καλύτερη διαχωρισμό. Συνιστάται η χρήση του διπλού άνω κάτω τελεία για τα ψευδοστοιχεία στον σύγχρονο κώδικα.

Πίνακας σύγκρισης:

Χαρακτηριστικό	Ψευδοκλάση	Ψευδοστοιχείο
Σύνταξη	`:selector`	`::selector`
Σκοπός	Κατάσταση στοιχείου	Μέρος στοιχείου ή γενεθλιωμένο περιεχόμενο
Παραδείγματα	`:hover`, `:focus`, `:first-child`	`::before`, `::after`, `::first-letter`

Περιγράψτε τις ψευδοκλάσεις και τα ψευδο-στοιχεία στο CSS.