:first-of-typeCSS selektorius leidžia nukreipti pirma grupė Kurių per savo konteinerio elementą. CSS selektorių 3 lygio specifikacijoje jis apibrėžiamas kaip „struktūrinė pseudoklasė“, tai reiškia, kad jis naudojamas kuriant turinį pagal jo santykį su tėvų ir brolių turiniu.
Tarkime, kad turime straipsnį su pavadinimu ir keliomis pastraipomis:
Paragraph 1.
Paragraph 2.
Paragraph 3.
Pirmąją pastraipą norime padaryti didesnę, kaip „ledo“ ar įvadinę pastraipą. Užuot suteikę klasę, galime ją :first-of-typepasirinkti:
p:first-of-type ( font-size: 1.25em; )Naudojimas :first-of-typeyra labai panašus į, :nth-childbet su vienu kritiniu skirtumu: jis yra mažiau specifinis. Ankstesniame pavyzdyje, jei būtume naudoję p:nth-child(1), nieko nenutiktų, nes pastraipa nėra pirmasis jos tėvų vaikas . Tai atskleidžia galybę :first-of-type: jis nukreiptas į tam tikro tipo elementus tam tikrame susitarime, susijusiame su panašiais broliais ir seserimis, ne su visais.
Išsamesnis toliau pateiktas pavyzdys parodo, kaip naudojamas :first-of-typeir susijęs pseudo klasės selektorius :last-of-type.
Naršyklės palaikymas
| „Chrome“ | „Safari“ | „Firefox“ | Opera | T.Y | „Android“ | „iOS“ |
|---|---|---|---|---|---|---|
| Veikia | 3.2+ | Veikia | 9,5+ | 9+ | Veikia | Veikia |
:first-of-typebuvo pristatytas CSS selektorių 3 modulyje, o tai reiškia, kad senos naršyklių versijos jo nepalaiko. Tačiau šiuolaikinis naršyklės palaikymas yra nepriekaištingas, o naujieji pseudo selektoriai yra plačiai naudojami gamybos aplinkose. Jei jums reikia senesnės naršyklės palaikymo, naudokite IE polifillą arba naudokite šiuos pasirinkiklius nekritiniais būdais, palaipsniui tobulindami, o tai rekomenduojama.