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

Anonim

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

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



    

  • First Item
    • 

  • Second Item
    • 

  • Third Item
    • 

  • Fourth Item
    • 

  • Fifth Item
    •

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

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

Όπως μπορείτε να δείτε, :nth-last-of-typeπαίρνει ένα επιχείρημα: αυτό μπορεί να είναι ένας ενιαίος ακέραιος, οι λέξεις-κλειδιά "ζυγό" ή "περίεργο" ή ένας τύπος. Εάν καθοριστεί ένας ακέραιος αριθμός επιλέγεται μόνο ένα στοιχείο - αλλά οι λέξεις-κλειδιά ή ένας τύπος θα επαναλάβουν όλα τα παιδιά του γονικού στοιχείου και θα επιλέξουν ταιριαστά στοιχεία - παρόμοια με την πλοήγηση στοιχείων σε έναν πίνακα σε 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επιλογών:

Δείτε το Pen CSS-Tricks: nth-last-of-type από τον Chris Coyier (@chriscoyier) στο CodePen.

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

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

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

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

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

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

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