: nth-of-type - CSS-Κόλπα

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

Ας υποθέσουμε ότι έχουμε μια μη ταξινομημένη λίστα και επιθυμούμε να "zebra-stripe" εναλλακτικά στοιχεία λίστας:

First Item
Second Item
Third Item
Fourth Item
Fifth Item

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

li ( background: slategrey; ) /* select alternating items starting with the second item */ li:nth-of-type(2n) ( background: lightslategrey; )

Όπως μπορείτε να δείτε, :nth-of-typeπαίρνει ένα επιχείρημα: αυτό μπορεί να είναι ένας ενιαίος ακέραιος αριθμός, οι λέξεις-κλειδιά "ζυγό" ή "περίεργο" ή ένας τύπος όπως φαίνεται παραπάνω. Εάν καθοριστεί ένας ακέραιος αριθμός επιλέγεται μόνο ένα στοιχείο - αλλά οι λέξεις-κλειδιά ή ένας τύπος θα επαναληφθούν σε όλα τα παιδιά του γονικού στοιχείου και θα επιλέξουν ταιριαστά στοιχεία - παρόμοια με τα στοιχεία πλοήγησης σε έναν πίνακα σε JavaScript. Οι λέξεις-κλειδιά «ζυγό» και «περίεργο» είναι απλές, αλλά ο τύπος κατασκευάζεται χρησιμοποιώντας τη σύνταξη an+b, όπου:

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

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

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

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

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

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

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

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

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

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

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