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