:first-childValijat võimaldab teil sihtida esimene element kohe sees teise elemendi. 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 esimest lõiku suuremaks muuta - näiteks „lede“ või sissejuhatav tekst:
First paragraph…
Lorem ipsum…
Dolor sit amet…
Consectetur adipisicing…
Selle asemel, et anda talle klass (nt .first), saame :first-childselle valida:
p:first-child ( font-size: 1.5em; )Kasutamine :first-childon väga sarnane, :first-of-typekuid ühe kriitilise erinevusega: see on vähem spetsiifiline. :first-childpüüab sobitada ainult vanemelemendi kohe esimese lapse, samas first-of-typekui määratud elemendi esimene esinemine, isegi kui see pole HTML-is absoluutselt esimene. Ülaltoodud näites oleks tulemus sama, ainult sellepärast, et articleka lapse esimene laps on juhtumisi esimene pelement. See paljastab jõu :first-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 :first-childpseudoklassi valija kasutamist ja sellega seotud :last-child.
Brauseri tugi
| Chrome | Safari | Firefox | Ooper | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Ükskõik | 3,2+ | Ükskõik | 9,5+ | 9+ | Ükskõik | Ükskõik |
:first-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.