:first-childValitsin voit kohdistaa ensimmäiseen elementtiin heti sisälle toinen elementti. Se määritellään CSS Selectors -tason 3 spesifikaatiossa "rakenteelliseksi pseudoluokaksi", mikä tarkoittaa, että sitä käytetään sisällön tyylinmuokkaamiseen sen mukaan, mikä on sen suhde vanhempien ja sisarusten sisältöön.
Oletetaan, että meillä on artikkeli ja haluamme tehdä ensimmäisestä kappaleesta suuremman - kuten "lede" tai johdantoteksti:
First paragraph…
Lorem ipsum…
Dolor sit amet…
Consectetur adipisicing…
Sen sijaan, että annat sille luokan (esim. .first), Voimme :first-childvalita sen:
p:first-child ( font-size: 1.5em; )Käyttäminen :first-childon hyvin samanlaista kuin :first-of-typeyhdellä kriittisellä erolla: se on vähemmän spesifinen. :first-childyrittää sovittaa vain vanhemman elementin välittömän ensimmäisen lapsen, kun taas first-of-typevastaamaan määritetyn elementin ensimmäistä esiintymistä, vaikka se ei olisikaan ehdottomasti ensimmäinen HTML-koodissa. Yllä olevassa esimerkissä lopputulos olisi sama, koska myös heidän ensimmäinen lapsi articlesattuu olemaan ensimmäinen pelementti. Tämä paljastaa voiman :first-child: se voi tunnistaa elementin suhteessa kaikkiin sisaruksiinsa, ei vain saman tyyppisiin sisaruksiin.
Täydellisempi esimerkki alla osoittaa käytön :first-childja siihen liittyvän pseudoluokan valitsimen :last-child.
Selaimen tuki
| Kromi | Safari | Firefox | Ooppera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Minkä tahansa | 3.2+ | Minkä tahansa | 9,5+ | 9+ | Minkä tahansa | Minkä tahansa |
:first-childesiteltiin CSS Selectors -moduulissa 3, mikä tarkoittaa, että selainten vanhat versiot eivät tue sitä. Nykyaikainen selaintuki on kuitenkin moitteetonta, ja uusia pseudovalitsimia käytetään laajalti tuotantoympäristöissä. Jos tarvitset vanhempaa selaintukea, joko polyfill IE: lle tai käytä näitä valitsimia ei-kriittisillä tavoilla á la progressive enhancement, mikä on suositeltavaa.