Αποκτήστε περισσότερη δύναμη στα σχέδια ιστού σας χρησιμοποιώντας αυτούς τους προηγμένους επιλογείς CSS.

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

Αυτοί οι επιλογείς μπορεί να είναι δύσκολοι στη χρήση και είναι εύκολο να συνδυάσετε ψευδο-κλάσεις με ψευδοστοιχεία, οπότε πώς μπορείτε να τα διαφοροποιήσετε;

Κατανόηση ψευδο-τάξεων CSS

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

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

Σύνταξη και χρήση ψευδο-κατηγορίας CSS

Η σύνταξη για μια ψευδο-κλάση CSS αποτελείται από μια άνω και κάτω τελεία (:) ακολουθούμενο από το όνομα μιας ψευδοτάξης. Εδώ είναι η βασική σύνταξη:

selector:pseudo-class {
/* styles */
}

Σε αυτή τη σύνταξη:

  • εκλέκτορας αναφέρεται στο στοιχείο ή στα στοιχεία που θέλετε να επιλέξετε και να εφαρμόσετε στυλ. Μπορεί να είναι ένα στοιχείο HTML, μια κλάση, ένα αναγνωριστικό ή ένας πιο περίπλοκος επιλογέας όπως ένας συνδυασμός. Ο επιλογέας είναι προαιρετικός, αλλά συνήθως χρησιμοποιείτε έναν. Χωρίς αυτήν, η ψευδο-κλάση σας θα στοχεύει όλα τα στοιχεία στα οποία μπορεί να εφαρμοστεί.
  • ψευδοτάξη είναι η λέξη-κλειδί που αντιπροσωπεύει μια συγκεκριμένη κατάσταση ή συνθήκη που θέλετε να στοχεύσετε.

Το CSS κατηγοριοποιεί τις ψευδο-κλάσεις σε διάφορες ομάδες με βάση τη λειτουργικότητά τους και τις συνθήκες που στοχεύουν. Ακολουθούν οι κύριες κατηγορίες μαζί με μερικά παραδείγματα:

Αλληλεπίδραση χρήστη

:φτερουγίζω

Επιλέγει ένα στοιχείο όταν ο δείκτης του ποντικιού τοποθετείται πάνω του.

:ενεργός

Επιλέγει ένα στοιχείο όταν ο χρήστης το ενεργοποιεί, συνήθως κάνοντας κλικ.

:επισκέφθηκε

Επιλέγει συνδέσμους που έχει επισκεφτεί ο χρήστης.

Κατασκευαστικός

:πρώτο παιδί

Επιλέγει το πρώτο θυγατρικό στοιχείο ενός γονέα.

:τελευταίο παιδί

Επιλέγει το τελευταίο θυγατρικό στοιχείο ενός γονέα.

:nth-child (n)

Επιλέγει στοιχεία με βάση τη θέση τους μέσα σε έναν γονέα, επιτρέποντάς σας να στοχεύσετε συγκεκριμένα παιδιά.

Σχετικά με τη Φόρμα

:άτομα με ειδικές ανάγκες

Επιλέγει απενεργοποιημένα στοιχεία φόρμας.

:τετραγωνισμένος

Επιλέγει επιλεγμένα κουμπιά επιλογής ή πλαίσια ελέγχου.

Κατάσταση στοιχείου διεπαφής χρήστη

:Μη έγκυρο

Επιλέγει μη έγκυρα στοιχεία φόρμας.

:απαιτείται

Επιλέγει τα απαιτούμενα πεδία των στοιχείων της φόρμας.

:προαιρετικός

Επιλέγει στοιχεία φόρμας που είναι προαιρετικά πεδία.

Σχετικός σύνδεσμος

:Σύνδεσμος

Επιλέγει συνδέσμους που δεν έχουν επισκεφτεί.

Βασισμένο στη γλώσσα

:lang()

Επιλέγει στοιχεία με βάση τη γλώσσα που καθορίζεται στο χαρακτηριστικό "lang" τους.

Μπορείτε να δοκιμάσετε ένα κοινό παράδειγμα από εφαρμογή :hover εφέ σε εικόνες σε μια γκαλερί. Τα τυπικά στυλ περιλαμβάνουν τη μεγέθυνση ή το ξεθώριασμα αυτών των εικόνων όταν κάποιος τοποθετείται πάνω τους.

Εξερεύνηση ψευδο-στοιχείων CSS

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

Ψευδοστοιχεία βελτιώστε τη σχεδίαση και τη διάταξη της ιστοσελίδας σας δίνοντάς σας τη δυνατότητα να δημιουργείτε στυλ στοιχείων με τρόπους που παραδοσιακά ήταν δυνατοί μόνο με πραγματικά στοιχεία HTML.

Σύνταξη και υλοποίηση ψευδοστοιχείων CSS

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

selector::pseudo-element {
/* styles */
}

Σε αυτή τη σύνταξη:

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

Εδώ είναι μερικά από τα ψευδο-στοιχεία:

::πριν

Εισάγει περιεχόμενο πριν από το περιεχόμενο του επιλεγμένου στοιχείου.

::μετά

Εισάγει περιεχόμενο μετά το περιεχόμενο του επιλεγμένου στοιχείου.

::πρώτο γράμμα

Δίνει στυλ στο πρώτο γράμμα του κειμένου μέσα σε ένα στοιχείο.

::επιλογή

Δίνει στυλ στο τμήμα κειμένου που έχει επιλέξει ένας χρήστης με τον κέρσορα του.

::σημάδι

Προσαρμόζει στυλ στο πλαίσιο δείκτη ενός στοιχείου λίστας (π.χ. το σημείο κουκκίδας ή τον αριθμό σε μια λίστα).

::σύνθημα

Εφαρμόζει στυλ σε συνθήματα σε στοιχεία πολυμέσων όπως

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

Ομοιότητες και διαφορές

Ακολουθούν οι ομοιότητες και οι διαφορές μεταξύ ψευδοκλάσεων και ψευδοστοιχείων CSS:

Ψευτοτάξεις

Ψευδο-Στοιχεία

Σύνταξη

Πρόθεμα με μία άνω τελεία (:).

Πρόθεμα με δύο άνω τελείες (::).

Χρήση

Επιλέξτε και στυλ στοιχεία με βάση την κατάσταση, τη θέση ή την αλληλεπίδρασή τους με τον χρήστη.

Δώστε στυλ σε συγκεκριμένα μέρη του περιεχομένου ενός στοιχείου ή δημιουργήστε εικονικά στοιχεία.

Επιλογείς

Μπορεί να εμφανιστεί σε οποιοδήποτε σημείο σε έναν σύνθετο ή σύνθετο επιλογέα.

Πρέπει να είναι το τελικό στοιχείο ενός επιλογέα και μπορεί να εμφανιστεί μόνο μία φορά.

Εισαγωγή περιεχομένου

Δεν εισάγει περιεχόμενο, κυρίως για στυλ με βάση την κατάσταση.

Μπορεί να εισαγάγει περιεχόμενο ή εικονικά στοιχεία πριν ή μετά το περιεχόμενο του επιλεγμένου στοιχείου.

Τυπογραφικό στυλ

Δεν χρησιμοποιείται συνήθως για τυπογραφικό στυλ.

Χρησιμοποιείται για κείμενο και τυπογραφικό στυλ (π.χ. ::first-line, ::first-γράμμα).

Στοχευμένα μέρη

Στοχεύει ολόκληρα στοιχεία.

Στοχεύει συγκεκριμένα μέρη του περιεχομένου ενός στοιχείου.

Υποστήριξη προγράμματος περιήγησης

Γενικά με καλή υποστήριξη.

Γενικά υποστηρίζεται καλά, αλλά ορισμένα παλαιότερα προγράμματα περιήγησης ενδέχεται να έχουν περιορισμένη υποστήριξη.

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

Ψευδοτάξεις και ψευδο-στοιχεία σε δράση

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