Pasirinkiklis :last-child
leidžia nukreipti paskutinį elementą tiesiai į jo elementą. 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 turime straipsnį ir norime padaryti paskutinę pastraipą mažesnę, kad tai būtų turinio išvada (pvz., Redaktoriaus pastaba):
Lorem ipsum…
Dolor sit amet…
Consectetur adipisicing…
Last paragraph…
Užuot naudoję klasę (pvz. .last
), Galime ją :last-child
pasirinkti:
p:last-child ( font-size: 0.75em; )
Naudojimas :last-child
yra labai panašus į, :last-of-type
bet su vienu kritiniu skirtumu: jis yra mažiau specifinis. :last-child
bandys atitikti tik patį paskutinį pirminio elemento antrinį elementą, o last-of-type
paskutinį nurodyto elemento atvejį, net jei jis nebus paskutinis HTML. Aukščiau pateiktame pavyzdyje rezultatas būtų tas pats, tik todėl, kad paskutinis vaikas article
taip pat yra paskutinis p
elementas. Tai atskleidžia galybę :last-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 :last-child
ir susijęs pseudo klasės selektorius :first-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 |
:last-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.