:first-of-typeValitsin CSS voit kohdistaa ensimmäistä versiota elementin sen säiliöön. 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, jolla on otsikko ja useita kappaleita:
Paragraph 1.
Paragraph 2.
Paragraph 3.
Haluamme tehdä ensimmäisestä kappaleesta suuremman, eräänlaisena "ledena" tai johdantokappaleena. Sen sijaan, että annamme sille luokan, voimme :first-of-typevalita sen:
p:first-of-type ( font-size: 1.25em; )Käyttäminen :first-of-typeon hyvin samanlaista kuin :nth-childyhdellä kriittisellä erolla: se on vähemmän spesifinen. Yllä olevassa esimerkissä, jos olisimme käyttäneet p:nth-child(1), mitään ei tapahtuisi, koska kappale ei ole vanhempiensa ensimmäinen lapsi . Tämä paljastaa voiman :first-of-type: se kohdistaa tietyn tyyppisen elementin tietyssä järjestelyssä suhteessa samanlaisiin sisaruksiin, ei kaikkiin sisaruksiin.
Täydellisempi esimerkki alla osoittaa käytön :first-of-typeja siihen liittyvän pseudoluokan valitsimen :last-of-type.
Selaimen tuki
| Kromi | Safari | Firefox | Ooppera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Toimii | 3.2+ | Toimii | 9,5+ | 9+ | Toimii | Toimii |
:first-of-typeesiteltiin 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.