A :first-childválasztó lehetővé teszi, hogy az első elemet közvetlenül egy másik elemen belül célozza meg. A CSS Selectors 3. szintű specifikációja „strukturális ál-osztályként” definiálja, vagyis a tartalom stílusához használják a szülő és a testvér tartalmához való viszony alapján.
Tegyük fel, hogy van egy cikkünk, és az első bekezdést szeretnénk nagyobbá tenni - például „lede” vagy bevezető szöveg:
First paragraph…
Lorem ipsum…
Dolor sit amet…
Consectetur adipisicing…
Osztály (pl. .first) Megadása helyett használhatjuk :first-childa kiválasztására:
p:first-child ( font-size: 1.5em; )A használata :first-childnagyon hasonló, :first-of-typede egy kritikus különbséggel: kevésbé specifikus. :first-childcsak a szülőelem közvetlen első gyermekével próbál meg egyeztetni, míg first-of-typea megadott elem első előfordulásával, még akkor is, ha ez nem feltétlenül az első a HTML-ben. A fenti példában az eredmény ugyanaz lenne, csak azért, mert az első gyermek articleis történetesen az első pelem. Ez feltárja az erejét :first-child: képes azonosítani egy elemet az összes testvérével, nemcsak az azonos típusú testvérekkel.
Az alábbiakban bemutatott teljesebb példa bemutatja a :first-childkapcsolódó pszeudo-osztály választó használatát :last-child.
Böngésző támogatás
| Króm | Szafari | Firefox | Opera | AZAZ | Android | iOS |
|---|---|---|---|---|---|---|
| Bármi | 3.2+ | Bármi | 9.5+ | 9+ | Bármi | Bármi |
:first-childa CSS Selectors 3. moduljában vezették be, ami azt jelenti, hogy a böngészők régi verziói nem támogatják. A modern böngészőtámogatás azonban kifogástalan, és az új álválasztókat széles körben használják a gyártási környezetekben. Ha régebbi böngészőtámogatásra van szüksége, vagy töltse ki az IE-t, vagy használja ezeket a választókat nem kritikus módon, fokozatosan továbbfejlesztve, ami ajánlott.