Pasirinkiklis :first-child
leidžia nukreipti pirmą elementą iškart į kito elemento vidų. CSS selektorių 3 lygio specifikacijoje jis apibrėžiamas kaip „struktūrinė pseudoklasė“, tai reiškia, kad jis naudojamas kuriant turinį pagal jo santykį su tėvų ir brolių turiniu.
Tarkime, kad mes turime straipsnį ir norime padaryti didesnę pirmąją pastraipą, pavyzdžiui, „ledą“ ar įvadinio teksto dalį:
First paragraph…
Lorem ipsum…
Dolor sit amet…
Consectetur adipisicing…
Užuot suteikę klasę (pvz. .first
), Galime ją :first-child
pasirinkti:
p:first-child ( font-size: 1.5em; )
Naudojimas :first-child
yra labai panašus į, :first-of-type
bet su vienu kritiniu skirtumu: jis yra mažiau specifinis. :first-child
bandys suderinti tik su pirmuoju pirminio elemento antriniu elementu, o first-of-type
pagal pirmą nurodyto elemento atvejį, net jei jis nėra absoliučiai pirmas HTML. Aukščiau pateiktame pavyzdyje rezultatas būtų tas pats, tik todėl, kad pirmasis vaikas article
taip pat yra pirmasis p
elementas. Tai atskleidžia galybę :first-child
: jis gali nustatyti elementą, susijusį su visais savo broliais ir seserimis, ne tik su to paties tipo broliais.
Išsamesnis toliau pateiktas pavyzdys parodo, kaip naudojamas :first-child
ir susijęs pseudo klasės selektorius :last-child
.
Patikrinkite šį rašiklį!
Naršyklės palaikymas
„Chrome“ | „Safari“ | „Firefox“ | Opera | T.Y | „Android“ | „iOS“ |
---|---|---|---|---|---|---|
Bet koks | 3.2+ | Bet koks | 9,5+ | 9+ | Bet koks | Bet koks |
:first-child
buvo pristatytas CSS selektorių 3 modulyje, o tai reiškia, kad senos naršyklių versijos jo nepalaiko. Tačiau šiuolaikinis naršyklės palaikymas yra nepriekaištingas, o naujieji pseudo selektoriai yra plačiai naudojami gamybos aplinkose. Jei jums reikia senesnės naršyklės palaikymo, naudokite IE polifillą arba naudokite šiuos pasirinkiklius nekritiniais būdais, palaipsniui tobulindami, o tai rekomenduojama.