: ένατο παιδί - CSS-Κόλπα

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

/* Select the first list item */ li:nth-child(1) ( ) /* Select the 5th list item */ li:nth-child(5) ( ) /* Select every other list item starting with first */ li:nth-child(odd) ( ) /* Select every 3rd list item starting with first */ li:nth-child(3n - 2) ( ) /* Select every 3rd list item starting with 2nd */ li:nth-child(3n - 1) ( ) /* Select every 3rd child item, as long as it has class "el" */ .el:nth-child(3n) ( )

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

Ας υποθέσουμε ότι χτίζουμε ένα πλέγμα CSS και θέλουμε να αφαιρέσουμε το περιθώριο σε κάθε τέταρτη ενότητα πλέγματος. Εδώ είναι το HTML:

 One Two Three Four Five

Αντί να προσθέσουμε μια τάξη σε κάθε τέταρτο στοιχείο (π.χ. .last), μπορούμε να χρησιμοποιήσουμε :nth-child:

.module:nth-child(4n) ( margin-right: 0; )

Η :nth-childεπιλογέας λαμβάνει ένα όρισμα: αυτό μπορεί να είναι ένας απλός ακέραιος, οι λέξεις-κλειδιά even, oddή ένας τύπος. Εάν καθοριστεί ένας ακέραιος αριθμός επιλέγεται μόνο ένα στοιχείο - αλλά οι λέξεις-κλειδιά ή ένας τύπος θα επαναλάβουν όλα τα παιδιά του γονικού στοιχείου και θα επιλέξουν ταιριαστά στοιχεία - παρόμοια με τα στοιχεία πλοήγησης σε έναν πίνακα JavaScript. Οι λέξεις-κλειδιά «ζυγό» και «περίεργο» είναι απλές (2, 4, 6 κ.λπ. ή 1, 3, 5 αντίστοιχα). Ο τύπος κατασκευάζεται χρησιμοποιώντας τη σύνταξη an+b, όπου:

Το "a" είναι μια ακέραια τιμή
"N" είναι το κυριολεκτικό γράμμα "n"
Το "+" είναι χειριστής και μπορεί να είναι "+" ή "-"
Το "b" είναι ακέραιος και απαιτείται εάν ένας χειριστής συμπεριλαμβάνεται στον τύπο

Είναι σημαντικό να σημειωθεί ότι αυτός ο τύπος είναι μια εξίσωση και επαναλαμβάνει κάθε στοιχείο αδελφού, καθορίζοντας ποιο θα επιλεγεί. Το τμήμα "n" του τύπου, εάν περιλαμβάνεται, αντιπροσωπεύει ένα σύνολο αυξανόμενων θετικών ακέραιων αριθμών (ακριβώς όπως η επανάληψη μέσω πίνακα) Στο παραπάνω παράδειγμά μας, επιλέξαμε κάθε τέταρτο στοιχείο με τον τύπο 4n, ο οποίος λειτούργησε επειδή κάθε φορά που ένα στοιχείο ελέγχονταν, το "n" αυξήθηκε κατά ένα (4 × 0, 4 × 1, 4 × 2, 4 × 3, κ.λπ.). Εάν η σειρά ενός στοιχείου ταιριάζει με το αποτέλεσμα της εξίσωσης, επιλέγεται (4, 8, 12, κ.λπ.). Για μια πιο εμπεριστατωμένη εξήγηση των σχετικών μαθηματικών, διαβάστε αυτό το άρθρο.

Για να επεξηγήσουμε περαιτέρω, εδώ είναι μερικά παραδείγματα έγκυρων :nth-childεπιλογών:

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

Δοκιμαστής CSS-Tricks
Ο Tester της Lea Verou

: ένατο παιδί (ένα + b του)

Υπάρχει ένα ελάχιστα γνωστό φίλτρο που μπορεί να προστεθεί :nth-childσύμφωνα με την προδιαγραφή CSS Selectors: Η δυνατότητα επιλογής :nth-childενός υποσυνόλου στοιχείων, χρησιμοποιώντας τη of μορφή. Ας υποθέσουμε ότι έχετε μια λίστα μεικτού περιεχομένου: Κάποιοι έχουν την τάξη .video, κάποιοι έχουν την τάξη .pictureκαι θέλετε να επιλέξετε τις 3 πρώτες εικόνες. Θα μπορούσατε να το κάνετε με το φίλτρο "of" όπως:

:nth-child(-n+3 of .picture) ( /* Selects the first 3 elements applied not to ALL children but only to those matching .picture */ )

Σημειώστε ότι αυτό διαφέρει από την προσθήκη ενός επιλογέα απευθείας στον :nth-childεπιλογέα:

.picture:nth-child(-n+3) ( /* Not the same! This applies to elements matching .picture which _also_ match :nth-child(-n+3) */ )

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

Η υποστήριξη του προγράμματος περιήγησης για το φίλτρο "of" είναι πολύ περιορισμένη: Από αυτήν τη γραφή, μόνο το Safari υποστήριξε τη σύνταξη. Για να ελέγξετε την κατάσταση του αγαπημένου σας προγράμματος περιήγησης, ακολουθούν ανοιχτά ζητήματα που σχετίζονται με :nth-child(an+b of s):

Firefox: Υποστήριξη για το ένατο παιδί (An + B του sel)
Chrome: Εφαρμογή: nth-child (an + b του S)

Σημεία ενδιαφέροντος

:nth-childεπαναλαμβάνεται μέσω στοιχείων που ξεκινούν από την κορυφή της αρχικής παραγγελίας. Η μόνη διαφορά μεταξύ αυτού και :nth-last-childείναι ότι το τελευταίο επαναλαμβάνει στοιχεία που ξεκινούν από το κάτω μέρος της αρχικής σειράς.
Η σύνταξη για την επιλογή του πρώτου nαριθμού στοιχείων είναι λίγο αντίθετη. Ξεκινάτε με -nτον θετικό αριθμό στοιχείων που θέλετε να επιλέξετε. Για παράδειγμα, li:nth-child(-n+3)θα επιλέξετε τα πρώτα 3 liστοιχεία.
Ο :nth-childεπιλογέας είναι πολύ παρόμοιος με :nth-of-typeαλλά με μία κρίσιμη διαφορά: είναι λιγότερο συγκεκριμένος. Στο παραπάνω παράδειγμά μας θα παρήγαγαν το ίδιο αποτέλεσμα επειδή επαναλαμβάνουμε μόνο .moduleστοιχεία, αλλά αν επρόκειτο για μια πιο περίπλοκη ομάδα αδελφών, :nth-childθα προσπαθούσαμε να ταιριάξουμε όλα τα αδέλφια, όχι μόνο τα αδέλφια του ίδιου τύπου στοιχείου. Αυτό αποκαλύπτει τη δύναμη του :nth-child-it μπορεί να επιλέξει οποιοδήποτε στοιχείο αδελφού σε μια διάταξη, όχι μόνο στοιχεία που καθορίζονται πριν από το άνω και κάτω τελεία.

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

Χρώμιο	Σαφάρι	Firefox	ΛΥΡΙΚΗ ΣΚΗΝΗ	ΙΕ	Android	iOS
Οποιος	3.2+	Οποιος	9.5+	9+	Οποιος	Οποιος

:nth-childεισήχθη στο CSS Selectors Module 3, που σημαίνει ότι οι παλιές εκδόσεις των προγραμμάτων περιήγησης δεν το υποστηρίζουν. Ωστόσο, η σύγχρονη υποστήριξη του προγράμματος περιήγησης είναι άψογη και οι νέοι ψευδο-επιλογείς χρησιμοποιούνται ευρέως σε περιβάλλοντα παραγωγής. Εάν χρειάζεστε παλαιότερη υποστήριξη προγράμματος περιήγησης, είτε polyfill για IE, είτε χρησιμοποιήστε αυτούς τους επιλογείς με μη κρίσιμους τρόπους á la προοδευτική βελτίωση, κάτι που συνιστάται.