: viimane laps - CSS-trikid

Anonim

:last-childValijat 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-childselle valida:

p:last-child ( font-size: 0.75em; )

Kasutamine :last-childon väga sarnane, :last-of-typekuid ühe kriitilise erinevusega: see on vähem spetsiifiline. :last-childpüüab sobitada ainult vanemelemendi kõige viimase alamkeha, samas last-of-typekui 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 articlejuhtumisi viimane pelement. 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-childpseudoklassi 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-childvõ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.