Κάθε φορά που χρησιμοποιούμε το CSS, χρησιμοποιούμε τους επιλογείς. Αλλά παρά το γεγονός αυτό, οι επιλογείς CSS είναι ένα από τα πιο παραμελημένα μέρη της προδιαγραφής.
Μιλάμε για τους μεγάλους μετασχηματισμούς στο CSS3 αλλά πολύ συχνά ξεχνάμε τα βασικά. Η καλή χρήση των επιλογέων καθιστά την καθημερινή μας κωδικοποίηση απλούστερη και πιο κομψή. Σήμερα θα καλύψω τους 10 επιλογείς που συχνά σέρνουν το μυαλό μας, αλλά είναι και αποτελεσματικοί και πολύ χρήσιμοι.
Ο επιλογέας * μπορεί να είναι αυτός που θυμάται πολύ εύκολα, αλλά συχνά δεν χρησιμοποιείται. Αυτό που κάνει είναι να στυλ τα πάντα στη σελίδα και είναι υπέροχο για τη δημιουργία μιας επαναφοράς και επίσης για τη δημιουργία ορισμένων προεπιλεγμένων σελίδων, όπως η οικογένεια γραμματοσειρών και το μέγεθος που θέλετε να έχετε.
* {margin: 0;padding: 0;font-family: helvetica, arial, sans-serif;font-size: 16px;}Αυτός ο επιλογέας ονομάζεται παρακείμενος επιλογέας και αυτό που κάνει επιλέγει το στοιχείο που είναι αμέσως μετά το πρώτο στοιχείο. Εάν θέλετε να επιλέξετε το πρώτο div μετά την κεφαλίδα μας θα πληκτρολογήσετε:
header + div {margin-top: 50px;}Αυτός ο επιλογέας θα επιλέξει μόνο τα άμεσα παιδιά, σε αντίθεση με το ΑΒ, που θα επιλέξει όλα τα επίπεδα παιδιών του Α. Αυτός ο επιλογέας συνιστάται όταν εργάζεστε με παιδιά πρώτου επιπέδου ενός γονικού στοιχείου. Για παράδειγμα, αν θέλετε να επιλέξετε τα στοιχεία λίστας πρώτου επιπέδου σε μια μη ταξινομημένη λίστα που μοιάζει με αυτή:
- List Item With ul
- Sub list item
- Sub list item
- Sub list item
- List Item
- List Item
Θα χρησιμοποιούσατε αυτόν τον επιλογέα, επειδή ο συνήθης επιλογέας AB θα επιλέξει επίσης τα στοιχεία της λίστας μέσα στην ένθετη λίστα
ul > li {background: black;color: white;}Αυτός είναι ένας πολύ καλός επιλογέας όταν θέλετε να στυλ ένα συγκεκριμένο σύνδεσμο με διαφορετικό τρόπο, ό, τι είναι σε εισαγωγικά θα ταιριάζει με το href του συνδέσμου. Για παράδειγμα, για να στυλ όλα τα links στο facebook με το μπλε χρώμα που θα χρησιμοποιούσατε:
a[href*="facebook"] {color: blue;}Υπάρχει επίσης μια έκδοση χωρίς το * που ταιριάζει με την ακριβή διεύθυνση URL που μπορείτε να χρησιμοποιήσετε για ακριβείς συνδέσμους.
Αυτός ο επιλογέας αν είναι ιδιαίτερα χρήσιμος λόγω της ρήτρας άρνησης που σας επιτρέπει να επιλέξετε οποιαδήποτε ομάδα στοιχείων που δεν ταιριάζουν με αυτά που τοποθετείτε στο B. Εάν θέλετε να επιλέξετε κάθε div εκτός από το υποσέλιδο που χρειάζεστε:
div:not(.footer) {margin-bottom: 40px;}Το πρώτο παιδί και το τελευταίο παιδί μας επιτρέπουν να επιλέγουμε το πρώτο και το τελευταίο παιδί του γονικού στοιχείου. Αυτό μπορεί να είναι μια μεγάλη βοήθεια όταν πρόκειται για τη λίστα στοιχείων και την κατάργηση του περιθωρίου-δεξιά ή των συνόρων. Για να αφαιρέσετε το περιθώριο στο πρώτο στοιχείο λίστας και το περιθώριο στο τελευταίο στοιχείο λίστας που χρειάζεστε:
ul li:first-child {border: none;}ul li:last-child {margin-right: 0px;}Το n-παιδί είναι ένας απλός τρόπος για να επιλέξετε οποιοδήποτε παιδί ενός στοιχείου με τη σειρά του. Εάν, για παράδειγμα, θέλετε το τρίτο στοιχείο της λίστας σε μια λίστα με μη ταξινομημένες σελίδες, αυτό θα ήταν ο τρόπος να πάτε:
ul li:nth-child(3) {background: #ccc;}Μπορούμε να χρησιμοποιήσουμε το nth-child για να επιλέξουμε κάθε πολλαπλασιαστή ενός αριθμού χρησιμοποιώντας τη μεταβλητή n, για παράδειγμα αν βάλουμε 3n θα επιλέξει τον αριθμό στοιχείου λίστας 3, 6, 9, 12 και ούτω καθεξής.
Το nth-last-child λειτουργεί όπως το nth-child, αλλά αντί να μετράει από το πρώτο στοιχείο της λίστας αρχίζει να μετρά από το τελευταίο, οπότε αν τον χρησιμοποιήσετε με τον δεύτερο αριθμό, θα επιλέξει το στοιχείο της λίστας που έρχεται πριν από το τελευταίο και η χρήση του είναι ακριβώς όπως ο επιλογέας n-παιδιού:
ul li:nth-last-child(2) {background: #ccc;}Αυτός ο επιλογέας κάνει ακριβώς αυτό που νομίζετε ότι κάνει. βλέπει τι είδους στοιχείο τοποθετήσατε σε αυτό και επιλέγει, για παράδειγμα, το τρίτο στοιχείο στη σελίδα σας που ταιριάζει με αυτό που πληκτρολογήσατε. Για την επιλογή της τρίτης παραγράφου σε ένα div θα χρησιμοποιούσατε:
div p:nth-of-type(3) {font-style: italic;}Παρατηρήσατε ποτέ ότι όταν ψάχνετε για κάτι στο Google οι σελίδες που έχετε ήδη δει εμφανίζονται σε διαφορετικό χρώμα; Αυτό είναι ακριβώς αυτό που επισκέπτεται. Αυτό είναι μια μεγάλη προσθήκη για τους χρήστες, αλλά μερικές φορές είναι ξεχασμένη και από την εμπειρία μου έρχεται σε πρακτικό κάθε φορά που ψάχνω google.
a:visited {color: blue;}Με την εμπειρία μου χρησιμοποιώντας αυτά τα είδη των επιλογέων, όταν η κωδικοποίηση μπορεί να μας σώσει πολύ χρόνο και επίσης να αποφύγουμε την ανάγκη πολλών αναγνωριστικών να γεμίζουν το markup μας. Και αυτό είναι μόνο η αρχή των επιλογέων CSS, υπάρχουν πολλοί περισσότεροι επιλογείς που είναι πραγματικά βολικοί αλλά μερικές φορές ξεχασμένοι.
Χρησιμοποιείτε επιλογείς CSS στα φύλλα στυλ; Είναι πιο εύκολο να πέσετε πίσω σε αναγνωριστικά και κλάσεις; Ενημερώστε μας στα σχόλια.
Προτεινόμενη εικόνα / μικρογραφία, εικόνα κώδικα μέσω Shutterstock.