:last-child
Valijat võimaldab teil sihtida viimase elemendi otse sees oma sisaldavad element. CSS-i selektorite 3. taseme spetsifikatsioonis on see määratletud kui „struktuurne pseudoklass”, mis tähendab, et seda kasutatakse sisu kujundamiseks lähtuvalt selle suhetest vanema ja õe-venna sisuga.
Oletame, et meil on artikkel ja me tahame viimast lõiku väiksemaks muuta, et toimida sisu järeldusena (nagu toimetaja märkus):
Lorem ipsum…
Dolor sit amet…
Consectetur adipisicing…
Last paragraph…
Klassi (nt .last
) kasutamise asemel saame :last-child
selle valida:
p:last-child ( font-size: 0.75em; )
Kasutamine :last-child
on väga sarnane, :last-of-type
kuid ühe kriitilise erinevusega: see on vähem spetsiifiline. :last-child
püüab sobitada ainult vanemelemendi kõige viimase alamkeha, samas last-of-type
kui määratud elemendi viimane esinemine, isegi kui see ei tule HTML-is viimasena. Ülaltoodud näites oleks tulemus sama, ainult sellepärast, et ka viimane laps on article
juhtumisi viimane p
element. See paljastab jõu :last-child
: see suudab tuvastada elemendi seoses kõigi oma õdede-vendadega, mitte ainult sama tüüpi õdede-vendadega.
Allpool toodud täielikum näide näitab :last-child
pseudoklassi valija kasutamist ja sellega seotud :first-child
.
Vaadake seda pliiatsit!
Brauseri tugi
Chrome | Safari | Firefox | Ooper | IE | Android | iOS |
---|---|---|---|---|---|---|
Ükskõik | 3,2+ | Ükskõik | 9,5+ | 9+ | Ükskõik | Ükskõik |
:last-child
võeti kasutusele CSS Selektorite moodulis 3, mis tähendab, et brauserite vanad versioonid seda ei toeta. Kuid tänapäevane brauseritugi on laitmatu ning uusi pseudovalijaid kasutatakse tootmiskeskkondades laialdaselt. Kui vajate vanemat brauserituge, siis kas IE jaoks täitke polüfill või kasutage neid valijaid mitte-kriitilistel viisidel, mida soovitatakse järk-järgult täiendada.