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

Anonim

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

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


Lorem ipsum…

Dolor sit amet…

Consectetur adipisicing…

Last paragraph…

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

p:last-child ( font-size: 0.75em; )

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

Η πληρέστερη παρακάτω παράδειγμα δείχνει τη χρήση της :last-childκαι ένα σχετικό επιλογέα ψευδο-class, :first-child.

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

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

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

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