: το τελευταίο παιδί - CSS-Κόλπα

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

Ας υποθέσουμε ότι έχουμε μια λίστα με άγνωστο αριθμό αντικειμένων και θέλουμε να επισημάνουμε το στοιχείο από το δεύτερο έως το τελευταίο (σε αυτό το ακριβές παράδειγμα, το "Τέταρτο στοιχείο"):



First Item
Second Item
Third Item
Fourth Item
Fifth Item

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

li ( background: slategrey; ) /* select the second-last item */ li:nth-last-child(2) ( background: lightslategrey; )

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

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

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

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

Δείτε αυτό το στυλό!

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

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

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

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

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

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

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