Υποενότητα 4.2: Ψευδο-κλάσεις και CSS Display

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

Οι ψευδο-κλάσειςPseudo- classes στο CSS χρησιμοποιούνται για να αλλάξουν την εμφάνιση ενός στοιχείου σε διαφορετικά συμβάντα (events) .

Παράδειγμα συμβάντων:

• Όταν ο χρήατης περνά τον δείκτη του πιντικιού πάνβ από έναν σύνδεσμο (mouse over)
• Όταν ο σύνδεσμος είναι μη επισκεφθείς - not visited, επισκεφθείς  - visited, ή ενεργός - active

Η γενική σύνταξη για τις ψευδο-κλάσεις είναι το όνομα του επιλογέα και η ψευδο-κλάση με άνω- κάτω τελεία μεταξύ τους.

Παράδειγμα:

p: hover { font-size: 1.2em; }

Τα παραπάνω θα κάνουν το κείμενο μέσα σε οποιοδήποτε στοιχείο p να εμφανίζεται μεγαλύτερο όταν ο χρήστης περνά το ποντίκι πάνω από το στοιχείο.

Η συνηθέστερη χρήση των ψευδοκλάδων γίνεται στους συνδέσμους.

Οι σύνδεσμοι έχουν τέσσερις διαφορετικές καταστάσεις.

• a: link: unvisited link
• a: hover: mouse over
• a: active: selected link
• a: visited: visited link

Σημείωση: Στο CSS η active κατάσταση θα πρέπει πάντα να γράφεται μετά την hover κατάσταση του. Η hover κατάσταση θα πρέπει να δηλώνεται μετά τις καταστάσεις link και visited. 

Περισσότερες πληροφορίες: https://www.w3schools.com/css/css_pseudo_classes.asp

Άσκηση

1. Ανοίξτε τον επεξεργαστή κώδικα, δημιουργήστε ένα νέο αρχείο και αποθηκεύστε το ως exersice04.2.01.html στον φάκελο "Exercises".
2. Επεξεργαστείτε το αρχείο. Στον browser θα πρέπει να εμφανίζεται η επόμενη εικόνα:

Λύση: