A :first-of-typeCSS-ben található választó segítségével megcélozhatja az elem első előfordulását a tárolójában. 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 címmel és több bekezdéssel:
Paragraph 1.
Paragraph 2.
Paragraph 3.
Nagyobbá akarjuk tenni az első bekezdést, mintegy „lede” vagy bevezető bekezdésként. Osztály megadása helyett használhatjuk :first-of-typea kiválasztására:
p:first-of-type ( font-size: 1.25em; )A használata :first-of-typenagyon hasonló, :nth-childde egy kritikus különbséggel: kevésbé specifikus. A fenti példában, ha használtuk p:nth-child(1)volna, semmi sem történne, mert a bekezdés nem a szülőjének (a ) első gyermeke . Ez rávilágít a következők erejére :first-of-type: egy adott elem egy bizonyos típusú elemét célozza meg egy adott elrendezésben a hasonló testvérekkel, nem pedig az összes testvérrel kapcsolatban.
Az alábbiakban bemutatott teljesebb példa bemutatja a :first-of-typekapcsolódó pszeudo-osztály választó használatát :last-of-type.
Böngésző támogatás
| Króm | Szafari | Firefox | Opera | AZAZ | Android | iOS |
|---|---|---|---|---|---|---|
| Művek | 3.2+ | Művek | 9.5+ | 9+ | Művek | Művek |
:first-of-typea 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.