Πώς λειτουργούν οι ψευδο-τάξεις του CSS, εξηγούνται με κώδικα και πολλά διαγράμματα

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

Σήμερα, θα έχουμε νόημα μιας ακόμη πιο προκλητικής πτυχής του CSS: ψευδο-τάξεις.

Υποχρεωτικό μέλος της οικογένειας CSS gif

Οι ψευδο-τάξεις που θα καλύψω εδώ έρχονται σε δύο γεύσεις.

  • * επιλογείς τύπου
  • * - επιλογείς παιδιών

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

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

Η σήμανση και το δέντρο

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


  

Τώρα θα μετατρέψω αυτόν τον κώδικα σε κάτι πιο οπτικό και πιο διαισθητικό: ένα δέντρο.

Το ακόλουθο στοιχείο του σώματος έχει 3 παιδιά, βασικά και δύο στοιχεία αγκύρωσης.


  

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

Εικ. 1

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

Στη συνέχεια, ας δούμε το .main div:

.main έχει 4 παιδιά. Τα πρώτα δύο στοιχεία είναι άγκυρα, έπειτα ένα στοιχείο ul και, στη συνέχεια, ένα στοιχείο αγκύρωσης.

Σύκο . 2

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

Εικ. 3 - Δημιουργία δέντρου του κώδικα HTML

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

"Χα χα χα χα χα χα!" "Ευχαριστω!" Αύξηση του μετρητή γραμματοσήμων σε 1, και ας μεταφερθούμε στην πρώτη μας ψευδο-τάξη.

Ψευδο-τάξη # 1: μόνο τύπου

Όλες οι ψευδο-κλάσεις ακολουθούν την ίδια μορφή:

τι θέλετε-να επιλέξετε: φιλτράρισμα {/ * styles * /}

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

a: μόνο τύπου {
  σύνορα: 2χλ.
}}

Στο απόσπασμα κώδικα που εμφανίζεται παραπάνω, τα στοιχεία που θέλετε να επιλέξετε είναι στοιχεία αγκύρωσης (η ετικέτα) και το φίλτρο είναι μόνο τύπου. Θα δούμε σε λίγο τι κάνει αυτός ο επιλογέας.

Κατ 'αρχάς, έχω ρυθμίσει ένα κώδικα για αν είστε πολύ τεμπέλης για να δημιουργήσετε ένα πρόγραμμα δοκιμών. Είστε ευπρόσδεκτοι, φίλε!

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

Εδώ έχω κάνει το δικό μου μέρος, εξηγώντας τον κώδικα που φαίνεται παραπάνω. Θα ξεκινήσουμε επιλέγοντας όλα όσα υπάρχουν και, στη συνέχεια, τελικά φιλτράρουμε.

Εικ. 4 - επιλογή όλων

Παρατηρήστε πώς έγινε η επιλογή; Κάθε τμήμα του δέντρου (αριθμημένα 1 έως 5) έχει στοιχεία με κοινό γονέα. Ο γονέας του Τμήματος 1 είναι σώμα, ο γονέας του Τμήματος 2 είναι .main και ούτω καθεξής. Για άλλη μια φορά, παρατηρήστε ότι κάθε τμήμα αντιστοιχεί σε ένα επίπεδο βαθύτερο στην ένθεση κώδικα.

Στη συνέχεια, αφού τα στοιχεία αγκυροβόλησης είναι αυτά που θέλετε-να επιλέξετε, θα κάνουμε ακριβώς αυτό:

Εικ. 5 - επιλογή μόνο των στοιχείων αγκύρωσης

Έχουμε επιλέξει όλο το στοιχείο αγκύρωσης σε κάθε τμήμα και τα αριθμήσαμε διαδοχικά από αριστερά προς τα δεξιά. Και ανέφερα, η σειρά - από αριστερά προς τα δεξιά - είναι σημαντική.

Αυτό είναι όπου τελειώνει το μέρος που θέλετε να επιλέξετε και αρχίζει το φιλτράρισμα.

Εικ. 6 - Επιλογή στοιχείων αγκύρωσης μόνο τύπου.

ο μόνος τύπος διασχίζει κάθε τμήμα και επιλέγει μόνο εκείνα τα στοιχεία αγκύρωσης που είναι το μόνο στοιχείο αγκύρωσης στην αντίστοιχη ενότητα. Παρατηρήστε πώς τα τμήματα 3, 4 και 5 είναι τα μόνα τμήματα με στοιχεία αγκύρωσης; Όπως φαίνεται στο σχήμα 6, αυτά είναι αυτά που επιλέγονται και δηλώνονται όταν εφαρμόζεται ένα στυλ.

Ψευδο-τάξη # 2: πρώτος-τύπου

Ας προχωρήσουμε γρήγορα στο τμήμα όπου τελειώνουμε επιλέγοντας όλα τα "τι θέλετε να επιλέξετε" (στοιχεία αγκύρωσης στην περίπτωσή μας).

Εικ. 7 - Επιλογή μόνο των στοιχείων αγκύρωσης.

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

Εικ. 8 - Επιλογή πρώτων στοιχείων αγκύρωσης τύπου.

Ακολουθεί ο κώδικας που καταλήγει σε αυτό:

α: πρώτος τύπου {
  σύνορα: 2χλ.
}}

Σε περίπτωση που ξεχάσατε τη σκληρή δουλειά που έκανα για να εγκαταστήσετε το CodePen, εδώ είναι και πάλι ο σύνδεσμος για να ελέγξετε τι αποδίδει ο κώδικας σε ένα πρόγραμμα περιήγησης.

Ψευδο-τάξη # 3: τελευταίο είδος

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

Εικ. 9 -: ​​επιλογές τελευταίου τύπου

"Τι γίνεται με τα τμήματα με ένα μόνο στοιχείο άγκυρας;", δεν είναι πολύ ευτυχής που ρωτήσατε την ερώτηση. Είναι πολύ απλό να δούμε αν μια ενότητα διαθέτει μόνο ένα στοιχείο αγκύρωσης, προφανώς περνάει το φίλτρο μόνο τύπου, αλλά όχι μόνο αυτό. Δεδομένου ότι δεν υπάρχουν στοιχεία αγκίστρωσης που να προηγούνται ή να ακολουθούν τη συγκεκριμένη ετικέτα, περνά τόσο τα φίλτρα πρώτου όσο και τελευταίου τύπου (π.χ. ετικέτες, Τμήματα 4 και 5).

Ψευδο-τάξη # 4: n-of-type (αριθμός / an + b / ζυγό / μονό)

Και τώρα τελικά δαγκώνουμε στο ζουμερό μέρος του άρθρου, υπάρχει απλό CSS με μερικές πέμπτες βαθμολογίες Math, ελπίζουμε να το απολαύσετε να το απολαύσετε.

Ας ξεκινήσουμε με το ακόλουθο στυλ.

α: n-ο-τύπου (1) {
  σύνορα: 2χλ.
}}

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

Συνεπώς, επιστρέφοντας, το nth-of-type (1) μπορεί να διαβαστεί ως εξής: πρώτος τύπου και δεν προκαλεί έκπληξη ότι λειτουργεί ακριβώς όπως: πρώτος τύπου και έχει ως αποτέλεσμα τα επιλεγμένα στοιχεία όπως φαίνεται παρακάτω . μόνο τα στοιχεία αγκίστρωσης που είναι πρώτα από τα είδη τους στο αντίστοιχο τμήμα τους.

Εικ. 10 - Οι άνθρωποι διαβάζουν ακόμη και αυτά;

Λοιπόν αυτό είναι καλό και dandy, αλλά ας δοκιμάσουμε κάτι διαφορετικό εδώ.

α: n-ο-τύπου (0) {
  σύνορα: 2χλ.
}}

Εάν το μαντέψατε σωστά, το οποίο είμαι βέβαιος ότι δεν έχετε, δεν επιλέγονται στοιχεία αγκύρωσης σε αυτή την περίπτωση. Καθώς η αρίθμηση των τύπων (και των παιδιών, όπως θα δούμε) σε κάθε τμήμα αρχίζει από 1 και όχι από 0, δεν υπάρχουν στοιχεία "0" άγκυρας σε καμία από τις ενότητες και ως εκ τούτου: nerot of type δεν επιλέγει τίποτα. Και θα συμβαίνει και για το nth-type (5) ή το nth-of-type (6/7/8) επειδή δεν υπάρχουν: πέμπτος τύπος ή α: έκτο / έβδομο / όγδοου τύπου σε οποιοδήποτε από τα τμήματα.

Αλλά αν προχωρούσαμε και χρησιμοποιούσαμε ...

α: n-ο-τύπου (2) {
  σύνορα: 2χλ.
}}

... πολύ ξεκάθαρα τα τμήματα 1 και 2 έχουν στοιχεία αγκίστρου δευτέρου τύπου και ως εκ τούτου αυτά είναι εκείνα που επιλέγονται.

Εικ. 11 -: nth-of-type (2) ή να διαβάσετε ως: δεύτερο είδος

Ομοίως, απλά για να ενισχύσουμε το σημείο εδώ, αν προχωρούσαμε και δηλώσαμε το ακόλουθο στυλ,

α: n-ο-τύπου (3) {
  σύνορα: 2χλ.
}}

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

Εικ. 12 -: nth-of-type (3) ή ανάγνωση ως: τρίτου τύπου

Αρκετά απλό δεν είναι; Αλλά οι αριθμοί δεν είναι το μόνο πράγμα που μπορείτε να περάσετε σε: nth-of-type (...), αυτός ο τύπος είναι πιο ισχυρός ώστε να μπορείτε να περάσετε και σε τύπους μορφής (a * n) + b (ή για συντομία α + β). Όπου a και b είναι σταθερές και n είναι μια τιμή> = 0. Πώς σας άρεσε ο επικεφαλής του Math topping; μην ανησυχείτε ότι όλα θα έχουν νόημα σε ένα δευτερόλεπτο.

Σκεφτείτε το παρακάτω στυλ

α: n-ο-τύπου (n) {σύνορο: 2px μαύρο μαύρο? }}

Ο τύπος που πέρασε στον επιλογέα παραπάνω είναι (1 * n) + 0 [= n], a είναι 1, b είναι 0 και n είναι καλά, n. Αυτό που συμβαίνει στη συνέχεια είναι ότι, ξεκινώντας από το 0, η αριθμητική τιμή του n είναι προοδευτικά συνδεδεμένη στον τύπο και η επιλογή γίνεται. Επομένως, ένα nth-of-type (n) βασικά μεταφράζεται σε

α: n-ο-τύπου (0) {border: 2px μαύρο μαύρο? } // n = 0
α: nth-of-type (1) {border: 2px μαύρο μαύρο? } // n = 1
α: n-ο-τύπου (2) {σύνορο: 2px μαύρο μαύρο? } // n = 2
α: n-ο-τύπου (3) {border: 2px μαύρο μαύρο? } // n = 3
α: nth-of-type (4) {border: 2px μαύρο μαύρο? } // n = 4
...

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

Ας εξετάσουμε ένα ακόμη παράδειγμα

α: n-ο-τύπου (2n + 1) {σύνορα: 2px μαύρο μαύρο? }}

Ξεκινώντας από το 0 και αυξάνοντας σταδιακά τις τιμές του n στον τύπο δημιουργεί τους ακόλουθους επιλογείς.

// n = 0 υποδηλώνει (2 * 0) + 1 = 1
α: nth-of-type (1) {border: 2px μαύρο μαύρο? }}
// n = 1 υποδηλώνει (2 * 1) + 1 = 3
α: n-ο-τύπου (3) {border: 2px μαύρο μαύρο? }}
// n = 2 υποδηλώνει (2 * 2) + 1 = 5 - Δεν υπάρχουν επιλογές, δεδομένου ότι δεν υπάρχει κανένας πέμπτος τύπος σε κανένα από τα τμήματα
α: nth-of-type (5) {σύνορα: 2px μαύρο μαύρο? } ...
Σχήμα 13 - επιλογές n-of-type (2n + 1)

Εκτός από τους αριθμούς και τους τύπους που παράγουν αριθμούς, μπορείτε να περάσετε είτε σε ζυγές είτε σε ζυγό. επιλέγει ακόμη και όλες τις ομοιόμορφες εμφανίσεις ενός στοιχείου ιδιαίτερου τύπου σε μια ενότητα, δηλαδή: δεύτερης μορφής: τέταρτος του τύπου: έκτου τύπου κ.λπ. και από την άλλη πλευρά προφανώς: nth-of-type (περίεργο) επιλέγει όλα τα περίεργα περιστατικά, δηλαδή: πρώτος-τύπου,: τρίτος-τύπος,: ο πέμπτος τύπου κτλ.

Ψευδο-τάξη # 5: n-τελευταία-του-τύπου (αριθμός / an + b / ζυγός /

Αυτός ο επιλογέας λειτουργεί ακριβώς όπως ο προηγούμενος, αλλά με μια μικρή διαφορά. Δες το και μονος σου…

α: nth-τελευταίου τύπου (1) {border: 2px μαύρο μαύρο? }}
Εικ. 14 - nth-last-of-type (1)

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

Με αυτό φτάνουμε στο τέλος των επιλογέων * τύπου. Ελπίζαμε ότι ήταν μια διασκεδαστική βόλτα για σας, ξεκινήσαμε με τον τύπο του τύπου και στη συνέχεια μετακινήσαμε στον πρώτο τύπο, τελευταίο του τύπου και πήραμε μια τεράστια πίδακα στο nth-type (...) και nth-last- του τύπου (..). Αν σε κάπου στη μέση χάσατε το πιάσιμο και πέσατε, σας ενθαρρύνω να παίξετε με αυτό το στυλό και να διαβάσετε την εξήγηση.

Εντάξει, χρόνος για να προχωρήσετε στην επόμενη σε αυτή τη λιγότερο επισκέπτη γωνιά του θεματικού πάρκου CSS. Μια άλλη κατηγορία ψευδοεπιλογών / τάξεων που πρόκειται να εμβαθύνουμε είναι οι * -διδασκαλίες των παιδιών. Με μια ξεκάθαρη κατανόηση του τρόπου με τον οποίο οι επιλεκτικοί * τύπου επιλογείς δουλεύουν πιάνοντας την ιδέα πίσω από το * - οι επιλογείς παιδιών πρέπει να είναι ένα cinch για εσάς. "Κάτι βέβαιον ή εύκολον? Τι είναι αυτό? Είναι μια μονάδα μέτρησης; "Όχι ya dumbass, αυτό σημαίνει ένα εξαιρετικά εύκολο έργο. Τέλος πάντων, ας ξεκινήσουμε με τον πρώτο μας επιλογέα παιδιών, μόνο: παιδί.

Παιδική ψευδο-τάξη # 1: μόνο-παιδί

Σκεφτείτε το παρακάτω στυλ.

a: μόνο-παιδί {
  σύνορα: 2χλ.
}}

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

Εικ. 15 - α: επιλογές μόνο για παιδιά

Είχα ένα φίλο που δεν ήταν ποτέ το αγαπημένο της μητέρας του και ήταν ένα μοναδικό παιδί. Απλά ήθελε να συνδέσει αυτό εκεί μέσα, εν πάση περιπτώσει, παρατηρήστε ότι σε αντίθεση με * επιλογείς τύπου δεν είμαστε πλέον τύποι αρίθμησης, αλλά παιδιά, αρχίζοντας φυσικά από 1 (και όχι 0). Όταν συγκρίνεται μόνο με τον τύπο, το στοιχείο αγκύρωσης στο τμήμα 3 δεν επιλέγεται καθώς ο γονέας του (ul) έχει 3 παιδιά, αν και (το στοιχείο αγκίστρωσης στο επίπεδο 3) είναι ένα μόνο παιδί τύπου «α» του γονέας, δεν είναι το μόνο παιδί, υπάρχουν 2 lis επίσης.

Παιδική ψευδο-τάξη # 2: πρώτο παιδί

Εξετάστε την ακόλουθη δήλωση στυλ.

α: πρώτο παιδί {
  σύνορα: 2χλ.
}}

Απλά λέει, επιλέξτε όλο το στοιχείο άγκυρας, αλλά με μια προϋπόθεση στο μυαλό, το στοιχείο αγκύρωσης θα πρέπει να είναι το πρώτο παιδί του γονέα του. Αυτό είναι, δεν χρειάζονται περαιτέρω εξηγήσεις.

Εικ. 16 - α: επιλογές πρώτου παιδιού

Γιατί εάν είστε λίγο συγκεχυμένοι για το λόγο που το a στο τμήμα 1 δεν επιλέχθηκε είναι επειδή το πρώτο παιδί στο τμήμα 1 (του οποίου ο γονέας είναι το σώμα) είναι .main, το πρώτο a στο τμήμα 1 είναι το δεύτερο παιδί και couldn ' t περάσει το φίλτρο του πρώτου παιδιού, αυτός είναι ο ακριβής λόγος για τον οποίο ο φτωχός τύπος κατέληξε να μην είναι επιλεγμένος και του δόθηκε ένα μεγάλο hashtag fuck μακριά. Ας συνεχίσουμε στο επόμενο.

Παιδική ψευδο-τάξη # 3: τελευταίο παιδί

Αυτό είναι το μέρος όπου οι επιλογείς θα πρέπει να αρχίσουν να παίρνουν αυτονόητες και θα πρέπει να αρχίσετε να σκέφτεστε ότι είμαι χαζή προσπαθώντας να τους εξηγήσω. Αλλά το όνομά μου δεν είναι θολή και δεν με νοιάζει αυτό που νομίζεις. "Νίκαια είκοσι μία αναφορά πιλότων εκεί" ναι ξέρω, ευχαριστώ. Τώρα, δείτε την ακόλουθη δήλωση στυλ.

α: τελευταίο παιδί {
  σύνορα: 2χλ.
}}

τι-θέλετε-να-επιλέξετε; "Στοιχεία αγκύρωσης". Και το φίλτρο που θέλετε να χρησιμοποιήσετε; τελευταίο παιδί. Αυτό απλά μεταφράζεται για να επιλέξετε εκείνα τα στοιχεία αγκύρωσης που είναι το τελευταίο παιδί του γονέα τους. Ή, με άλλα λόγια, επιλέξτε στοιχεία άγκυρας των οποίων ο γονέας τελικά αποφάσισε ότι δεν ήταν πλέον διασκεδαστικό και σταμάτησε μετά το γένος αυτό γεννήθηκε. Παρακάτω είναι αυτό που το δέντρο μοιάζει με: επιλογές τελευταίου παιδιού.

Εικόνα 16: επιλογές τελευταίου παιδιού.

Παιδική ψευδο-τάξη # 4: n-παιδί (αριθμός / έτος + β / ζυγό / μονό)

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

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

α: n-παιδί (1) {σύνορο: 2px μαύρο μαύρο? }}

Είναι όλα τα ίδια με: nth-of-type, θα είχα συνδεθεί με εκείνη την ενότητα του άρθρου εδώ, αλλά οι μεσαίες πολιτικές δεν το επιτρέπουν, αν θέλετε μια ανανέωση, θα πρέπει να μετακινηθείτε επάνω σε εκείνο το τμήμα. Αφήνοντας στην άκρη τις μεσαίες πολιτικές οι οποίες ενδέχεται να αλλάξουν στο μέλλον, αυτό που δεν άλλαξε είναι η διαδικασία της αποκρυπτογράφησης n-επιλογών.

Ακριβώς όπως και με: nth-of-type, στο όνομα επιλογέα πάρτε τον αριθμό σε παρενθέσεις και αντικαταστήστε το "nth" με την κανονική μορφή αυτού του αριθμού. Επομένως, ο επιλογέας που εμφανίζεται στο παράδειγμα είναι ισοδύναμος με: πρώτο παιδί και λειτουργεί ακριβώς το ίδιο. δηλ. επιλέγει όλα τα στοιχεία αγκύρωσης, δεδομένου ότι είναι το πρώτο παιδί του γονέα τους.

Αυτό θα έπρεπε να φέρει την ομοιότητα μεταξύ των δύο n-επιλογών (nth-of-type και nth-child), αλλά πάντα θα προχωρήσουμε και θα ρίξουμε μια ματιά σε ένα άλλο παράδειγμα.

α: n-παιδί (2n - 1) {σύνορα: 2px μαύρο μαύρο? }}

Ξεκινάμε με τη σταδιακή σύνδεση των τιμών του n ξεκινώντας από το 0 στον τύπο, πράγμα που μας κάνει να συνειδητοποιήσουμε ότι ο επιλογέας που φαίνεται παραπάνω είναι ουσιαστικά ισοδύναμος με αυτούς που φαίνονται παρακάτω.

// n = 0 υποδηλώνει (2 * 0) - 1 = 0 - 1 = -1
α: n-παιδί (-1) {σύνορα: 2px μαύρο μαύρο? } | Δεν υπάρχουν επιλογές
// n = 1 υποδηλώνει (2 * 1) - 1 = 2 - 1 = 1
α: n-παιδί (1) {σύνορο: 2px μαύρο μαύρο? }}
// n = 2 υποδηλώνει (2 * 2) - 1 = 4 - 1 = 3
α: n-παιδί (3) {border: 2px μαύρο μαύρο? }}
// n = 3 υποδηλώνει (2 * 3) - 1 = 6 - 1 = 5
α: n-παιδί (5) {border: 2px solid μαύρο? } | Δεν υπάρχουν περαιτέρω επιλογές
...

Όπως συμβαίνει, εάν ο επιλογέας παίρνει αριθμούς από όρια (όπως -1, 5, 6 ... στην παραπάνω περίπτωση) που τροφοδοτούνται σε αυτό, απλώς τους αγνοεί. Ακολουθεί πώς φαίνεται το δέντρο με ένα nth-child (2n-1) που εφαρμόζεται.

Εικόνα 17 - Επιλογές nth-child (2n-1).

Οι άνθρωποι στο CSS Tricks έχουν ένα πολύ ενημερωτικό άρθρο που ονομάζεται Χρήσιμες: nth-child Συνταγές θα πρέπει να το ελέγξετε και να βάλετε τις γνώσεις σας για: nth-child για να δοκιμάσετε. Σας προκαλώ μ8.

Με αυτό θα μετακινηθούμε στον τελευταίο επιλογέα αυτού του άρθρου που είναι αφιερωμένο: nth-last-child. Γαμώτο! γιατί είναι "πλήθος" ακόμη και μια λέξη;

Παιδική ψευδο-τάξη # 5: n-τελευταίο παιδί (αριθμός / έτος + β / ζυγό / περίεργο)

Αυτός ο επιλογέας λειτουργεί ακριβώς όπως: nth-child εκτός από το ότι αρχίζει να επιλέγει στοιχεία από την αντίθετη κατεύθυνση ακριβώς όπως ο ενοχλητικός δάσκαλος του γυμνασίου που θα θέσει ερωτήσεις στην τάξη ξεκινώντας από τους ειρηνικούς λαούς που κάθονται στα τελευταία παγκάκια. Ο Θεός τον μισούσα. Αν κοιτάξετε τα δέντρα που έχουν τραβηχτεί μέχρι στιγμής, τα παιδιά αριθμούνται από αριστερά προς τα δεξιά σε κάθε τμήμα, αλλά αυτός ο θηλυκός επιλογέας βλέπει το δέντρο σαν αυτό

Εικ. 18

Τα παιδιά σε κάθε τμήμα αριθμούνται από δεξιά προς τα αριστερά. Έτσι, αν προχωρήσουμε και εφαρμόσουμε το ακόλουθο στυλ

α: nth-last-child (1) {border: 2px μαύρο μαύρο? }}

τα στοιχεία αγκύρωσης θα επιλεγούν όπως φαίνεται παρακάτω.

Πολύ απλό, έτσι δεν είναι; Αυτός ο επιλογέας επίσης δέχεται πολύ άνετα τους τύπους (της φόρμας a + b) και των ζυγών / ζωντανών συμβολοσειρών, αλλά οι επιλογές είναι κατασκευασμένες από το αντίθετο άκρο.

Εντάξει, εδώ τελειώνει το ταξίδι μας. Μπορείτε να πληρώσετε για το εισιτήριό σας tweeting αυτό το άρθρο στους φίλους προγραμματιστές σας.

Ελπίζω να σας άρεσε να το διαβάσετε και να μάθετε κάτι νέο, συμπεριλαμβανομένων μερικών λαμπερών νέων αγγλικών λέξεων.

Αυτός είναι ο Nash που αποσύρεται. Θα σε δω στο επόμενο άρθρο. Παρακολουθήστε με στο Twitter για να έρθετε σε επαφή. Τιτίβισμα σχετικά με πράγματα που σχετίζονται με το dev. Πολύ.

Ψάχνετε για περισσότερα; Δημοσιεύομαι τακτικά στο blog μου στο nashvail.me. Βλέπεις εκεί, έχεις ένα καλό!