:first-childSelektors ļauj uzreiz mērķēt uz pirmo elementu iekšpusē citu elementu. CSS Selectors 3. līmeņa specifikācijā tas ir definēts kā “strukturāla pseidoklase”, kas nozīmē, ka to lieto satura veidošanai, pamatojoties uz tā attiecībām ar vecāku un brāļu saturu.
Pieņemsim, ka mums ir raksts un mēs vēlamies palielināt pirmo rindkopu - piemēram, “lede” vai ievada teksta daļu:
First paragraph…
Lorem ipsum…
Dolor sit amet…
Consectetur adipisicing…
Tā vietā, lai piešķirtu tai klasi (piem. .first), Mēs varam izmantot, :first-childlai to atlasītu:
p:first-child ( font-size: 1.5em; )Lietošana :first-childir ļoti līdzīga, :first-of-typebet ar vienu kritisku atšķirību: tā ir mazāk specifiska. :first-childmēģinās saskaņot tikai ar vecāku elementa tūlītējo pirmo bērnu, bet first-of-typear noteikto elementu pirmo parādīšanos, pat ja tas HTML nav absolūti pirmais. Iepriekš minētajā piemērā rezultāts būtu vienāds tikai tāpēc, ka arī pirmais bērns articleir pirmais pelements. Tas atklāj spēku :first-child: tas var identificēt elementu attiecībā uz visiem saviem brāļiem un māsām, ne tikai uz viena tipa brāļiem un māsām.
Tālāk sniegtajā pilnīgākajā piemērā parādīts :first-childpseidoklases selektora un ar to saistītā selektora lietojums :last-child.
Pārlūka atbalsts
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Jebkurš | 3.2+ | Jebkurš | 9,5+ | 9+ | Jebkurš | Jebkurš |
:first-childtika ieviests CSS selektoru 3. modulī, kas nozīmē, ka vecās pārlūkprogrammu versijas to neatbalsta. Tomēr mūsdienu pārlūka atbalsts ir nevainojams, un jaunie pseido-selektori tiek plaši izmantoti ražošanas vidēs. Ja jums ir nepieciešams vecāks pārlūka atbalsts, vai nu IE polifill, vai arī izmantojiet šos atlasītājus nekritiskos veidos, kas ir ieteicami pakāpeniski.