Μαθήματα Πληροφορικής & Προγραμματισμού

Τα pseudo class & pseudo elements στην CSS

Pseudo class (Ψευδο-τάξη)

pseudo class: Μια ψευδο-τάξη είναι ένας τρόπος επιλογής ορισμένων τμημάτων ενός εγγράφου HTML, βασισμένος κατ ‘αρχήν όχι στο ίδιο το δέντρο εγγράφων HTML και στα στοιχεία του ή σε χαρακτηριστικά του όπως για παράδειγμα όνομα, ιδιότητες ή περιεχόμενο, αλλά σε άλλες “φανταστικές” συνθήκες όπως η κωδικοποίηση γλώσσας ή η δυναμική κατάσταση ενός στοιχείου.

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

ΠΕΡΙΟΡΙΣΜΟΙ: Σε αντίθεση με τα ψευδο-στοιχεία, οι ψευδο-κλάσεις μπορούν να εμφανιστούν οπουδήποτε στην αλυσίδα επιλογής.

Δες την σχετική εικόνα:

Pseudo class - csc..com.gr - μαθήματα πληροφορικής

Pseudo Elements (Ψευδο-στοιχεία)

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

ΠΕΡΙΟΡΙΣΜΟΙ: Τα ψευδο-στοιχεία μπορούν να εφαρμοστούν μόνο σε εξωτερικά περιβάλλοντα και σε περιβάλλοντα εγγράφων – όχι σε γραμμικά στυλ. Τα ψευδο-στοιχεία περιορίζονται στο σημείο όπου μπορούν να εμφανιστούν σε μια εγγραφή CSS. Μπορούν να εμφανιστούν μόνο στο τέλος μιας αλυσίδας επιλογέα (και μετά το όνομα του επιλογέα). Μόνο ένα ψευδο-στοιχείο μπορεί να οριστεί ανά επιλογέα. Για την αντιμετώπιση πολλαπλών ψευδών στοιχείων σε μια δομή ενός στοιχείου, πρέπει να γίνουν δηλώσεις επιλογής / δήλωσης πολλαπλών στυλ. Μπορούν επίσης να απευθύνονται σε παραγόμενο περιεχόμενο που δεν βρίσκεται στο έγγραφο προέλευσης (με τα “before” και “after”).

Δες την σχετική εικόνα:

Pseudo class- csc..com.gr - μαθήματα πληροφορικής

Είναι εκπληκτικό τι μπορείτε να κάνετε με τα pseudo elements :before και :after.

Για κάθε στοιχείο στη σελίδα, μπορείτε να πάρετε δύο στοιχεία επιπλέον που μπορείτε να κάνετε οτιδήποτε θέλετε στην HTML. Ξεκλειδώνουν πολλές ενδιαφέρουσες δυνατότητες σχεδίασης χωρίς να επηρεάζουν αρνητικά τον κώδικα σας.

Δείτε εδώ όλα τα παραδείγματα

Αφήστε ένα Σχόλιο

Η ηλ. διεύθυνση σας δεν δημοσιεύεται. Τα υποχρεωτικά πεδία σημειώνονται με *

Αυτός ο ιστότοπος χρησιμοποιεί το Akismet για να μειώσει τα ανεπιθύμητα σχόλια. Μάθετε πώς υφίστανται επεξεργασία τα δεδομένα των σχολίων σας.