Ο :first-of-typeεπιλογέας στο CSS σας επιτρέπει να στοχεύσετε την πρώτη εμφάνιση ενός στοιχείου στο κοντέινερ του. Ορίζεται στις προδιαγραφές CSS Selectors Level 3 ως «δομή ψευδο-κλάσης», που σημαίνει ότι χρησιμοποιείται για το στυλ του περιεχομένου με βάση τη σχέση του με το γονικό και αδερφικό περιεχόμενο.
Ας υποθέσουμε ότι έχουμε ένα άρθρο με τίτλο και αρκετές παραγράφους:
Paragraph 1.
Paragraph 2.
Paragraph 3.
Θέλουμε να κάνουμε το πρώτο εδάφιο μεγαλύτερο, ως ένα είδος «lede» ή εισαγωγικής παραγράφου. Αντί να του δώσουμε ένα μάθημα, μπορούμε να το χρησιμοποιήσουμε :first-of-typeγια να το επιλέξουμε:
p:first-of-type ( font-size: 1.25em; )Η χρήση :first-of-typeείναι πολύ παρόμοια με, :nth-childαλλά με μία κρίσιμη διαφορά: είναι λιγότερο συγκεκριμένη. Στο παραπάνω παράδειγμα, αν είχαμε χρησιμοποιήσει p:nth-child(1), δεν θα συνέβαινε τίποτα επειδή η παράγραφος δεν είναι το πρώτο παιδί του γονέα της (το ). Αυτό αποκαλύπτει τη δύναμη :first-of-type: στοχεύει έναν συγκεκριμένο τύπο στοιχείου σε μια συγκεκριμένη διάταξη σε σχέση με παρόμοια αδέλφια, όχι όλα τα αδέλφια.
Η πληρέστερη παρακάτω παράδειγμα δείχνει τη χρήση της :first-of-typeκαι ένα σχετικό επιλογέα ψευδο-class, :last-of-type.
Υποστήριξη προγράμματος περιήγησης
| Χρώμιο | Σαφάρι | Firefox | ΛΥΡΙΚΗ ΣΚΗΝΗ | ΙΕ | Android | iOS |
|---|---|---|---|---|---|---|
| Εργα | 3.2+ | Εργα | 9.5+ | 9+ | Εργα | Εργα |
:first-of-typeεισήχθη στο CSS Selectors Module 3, που σημαίνει ότι οι παλιές εκδόσεις των προγραμμάτων περιήγησης δεν το υποστηρίζουν. Ωστόσο, η σύγχρονη υποστήριξη του προγράμματος περιήγησης είναι άψογη και οι νέοι ψευδο-επιλογείς χρησιμοποιούνται ευρέως σε περιβάλλοντα παραγωγής. Εάν χρειάζεστε παλαιότερη υποστήριξη προγράμματος περιήγησης, είτε polyfill για IE, είτε χρησιμοποιήστε αυτούς τους επιλογείς με μη κρίσιμους τρόπους á la προοδευτική βελτίωση, κάτι που συνιστάται.