Η διαμόρφωση του κειμένου και του περιεχομένου ενός ιστότοπου με κώδικα HTML είναι μόνο ένα «κομμάτι» του κτιρίου το μπροστινό μέρος μιας ιστοσελίδας. Ένα άλλο μεγάλο κομμάτι αυτής της διαδικασίας είναι η δημιουργία του οπτικού στυλ, το οποίο διέπεται από τους κανόνες του CSS.
Κάθε φορά που δημιουργούμε έναν νέο ιστότοπο ή πραγματοποιούμε σημαντικές αλλαγές διάταξης σε έναν υπάρχοντα, θέλουμε αναπόφευκτα συγκεκριμένα τμήματα του ιστότοπού μας να φαίνονται με συγκεκριμένο τρόπο. Για να γίνει αυτό, είναι σημαντικό να κατανοήσετε πώς να χρησιμοποιήσετε τα διάφορα Συνδυαστές CSS, όπως ο επιλογέας απογόνων CSS. Αυτός ο συνδυασμός CSS επιτρέπει σε μεγάλες ενότητες ενός ιστότοπου να λαμβάνουν τις ίδιες αλλαγές στυλ ταυτόχρονα.
Τι είναι το CSS Descendant Selector;
Ο επιλογέας απογόνων CSS είναι ένας από τους τέσσερις διαφορετικούς συνδυασμούς CSS. Κατά την προσθήκη ενός διαστήματος () μεταξύ δύο επιλογών, τα ίδια στοιχεία στυλ θα ισχύουν και για τον δεύτερο επιλογέα, δεδομένου ότι οι απόγονοι μοιράζονται τον ίδιο πρώτο επιλογέα.
Για να κατανοήσετε έναν επιλογέα απογόνων CSS, πρέπει πρώτα να το κάνετε κατανοήστε τους επιλογείς CSS. Ο καλύτερος τρόπος για να περιγράψετε έναν επιλογέα είναι ότι είναι ένας τελεστής CSS που προσδιορίζει το κομμάτι HTML που προσπαθείτε να σχεδιάσετε. Ονομάζεται επιλογέας επειδή "επιλέγει" οποιοδήποτε κομμάτι HTML μοιράζεται τον ίδιο χειριστή με τον γονέα CSS.
Κοινά παραδείγματα τέτοιων χειριστών είναι:
div
Πρόκειται για μια ετικέτα που ορίζει μια ενότητα HTML, η οποία μπορεί να περιλαμβάνει πράγματα όπως παραγράφους και περιεχόμενο ή:
λι
που είναι μια λίστα με σειρά. Μια άλλη παρόμοια ετικέτα είναι:
Ουλ
Αυτό δημιουργεί μια λίστα χωρίς ταξινόμηση. Τα πιο περίπλοκα μοτίβα αναφέρονται επίσης ως επιλογείς. Με απλά λόγια, ένας επιλογέας απογόνων CSS λέει σε έναν ιστότοπο πώς να μοιάζει όταν ένας επιλογέας «τοποθετείται» κάτω από έναν κοινό πρόγονο.
Ο πρώτος επιλογέας γίνεται ο γονέας CSS ή ο επιλογέας «πρόγονος» και ο δεύτερος επιλογέας γίνεται ο απόγονος. Σκεφτείτε πώς λειτουργεί ένας κατάλογος αρχείων: ο γονέας CSS μοιάζει με ένα φάκελο που περιέχει άλλους φακέλους, οι οποίοι μπορούν να περιέχουν δικούς τους φακέλους.
Από τους τέσσερις συνδυαστές, ο μόνος που επιλέγει ό, τι είναι ένθετο κάτω από ένα συγκεκριμένο γονικό CSS είναι ο επιλογέας απογόνων CSS. Υπάρχουν τρεις άλλοι συνδυαστές.
- Ο θυγατρικός επιλογέας («>» αντί για ένα κενό διάστημα) επιλέγει μόνο στοιχεία που αναφέρονται από τον πρώτο επιλογέα σε έναν συνδυασμό. Εάν ο πρώτος επιλογέας είναι (div) και ο δεύτερος επιλογέας είναι (p), επιλέγεται μόνο το (p) αρκεί να έχει (div) ως πρόγονο. Εάν μια παράγραφος δημιουργείται κάτω από μια νέα (ενότητα), ακόμη και αν είναι στο ίδιο (div), οι κανόνες στυλ δεν τηρούνται.
- Ο παρακείμενος επιλογέας αμφιθαλών (‘+’ αντί για ένα κενό διάστημα) επιλέγει μόνο το στοιχείο που βρίσκεται πιο κοντά στον δεύτερο επιλογέα του συνδυασμού. Εάν ο πρώτος επιλογέας είναι (div) και ο δεύτερος επιλογέας είναι (p), επιλέγεται το πρώτο στοιχείο που χρησιμοποιεί (p) αλλά όχι (div).
- Ο γενικός επιλογέας αμφιθαλών («~» αντί για ένα κενό διάστημα) επιλέγει κάθε στοιχείο εκτός από αυτά που αναφέρονται από τον δεύτερο επιλογέα. Εάν ο πρώτος επιλογέας είναι (div) και ο δεύτερος επιλογέας είναι (p), επιλέγεται κάθε στοιχείο που δεν είναι (p).
Πώς μοιάζει ένας CSS Descendant Selector;
Στο ακόλουθο παράδειγμα δύο διαφορετικών επιλογών απογόνων CSS που λειτουργούν δίπλα-δίπλα, το (div) είναι ο πρώτος επιλογέας στον πρώτο συνδυασμό, ενώ (ul) είναι ο πρώτος επιλογέας στον δεύτερο συνδυαστής. Και στους δύο επιλογείς απογόνων CSS, το (p) χρησιμοποιείται ως ο δεύτερος επιλογέας.
Τα στοιχεία στυλ διαφέρουν μεταξύ (div) και (ul), αλλά (p) φέρει σαφώς τα χαρακτηριστικά του γονικού CSS και στις δύο περιπτώσεις.
Γιατί να χρησιμοποιήσετε ένα CSS Descendant Selector;
Για να κατανοήσετε τη σημασία του επιλογέα απογόνων CSS, είναι πολύτιμο να κατανοήσετε πρώτα τους ένθετους επιλογείς CSS.
Γενικά θέλουμε να ισχύουν ορισμένοι κανόνες στυλ σε όλους τους ιστότοπους, όπως το συγκεκριμένο μέγεθος ή γραμματοσειρά που χρησιμοποιεί από προεπιλογή το κείμενο της παραγράφου (p). Ομοίως, το HTML μπορεί να αρχίσει να φαίνεται ακατάστατο εάν εφαρμόζονται αυτοί οι κανόνες στυλ για κάθε μεμονωμένη παράγραφο και όχι για ολόκληρο τον ιστότοπο.
Το Nested CSS είναι εφικτό μέσω της χρήσης συνδυασμών CSS, όπως ο επιλογέας απογόνων CSS. Με το "ένθεση" CSS κάτω από έναν γονικό επιλογέα, μπορείτε να πείτε γρήγορα και αποτελεσματικά έναν ιστότοπο πώς πρέπει να μοιάζει ένας συγκεκριμένος επιλογέας σε κάθε σενάριο στο οποίο αναφέρεται ο γονέας CSS.
Η χρήση ενός ένθετου επιλογέα CSS μας επιτρέπει να εφαρμόζουμε τους ίδιους κανόνες για το στυλ πολλών ενοτήτων ενός ιστότοπου ταυτόχρονα, επιτρέποντάς μας να περάσουμε με λιγότερη δουλειά, διατηρώντας παράλληλα την HTML μας καθαρή και παρθένα.