:first-of-typeValijat CSS võimaldab teil sihtida esimene esinemine elemendi sees oma konteiner. CSS-i selektorite 3. taseme spetsifikatsioonis on see määratletud kui „struktuurne pseudoklass”, mis tähendab, et seda kasutatakse sisu kujundamiseks lähtuvalt selle suhetest vanema ja õe-venna sisuga.
Oletame, et meil on artikkel pealkirja ja mitme lõiguga:
Paragraph 1.
Paragraph 2.
Paragraph 3.
Tahame esimest lõiku suuremaks muuta, omamoodi nn lede või sissejuhatava lõiguna. Selle asemel, et anda sellele klass, saame :first-of-typeselle valida:
p:first-of-type ( font-size: 1.25em; )Kasutamine :first-of-typeon väga sarnane, :nth-childkuid ühe kriitilise erinevusega: see on vähem spetsiifiline. Eespool toodud näites p:nth-child(1)ei juhtuks midagi, sest lõik pole selle vanema esimene laps . See näitab järgmist :first-of-type: see on suunatud kindla elemendi tüübile kindlas paigas seoses sarnaste õdede-vendadega, mitte kõigi õdede-vendadega.
Allpool toodud täielikum näide näitab :first-of-typepseudoklassi valija kasutamist ja sellega seotud :last-of-type.
Brauseri tugi
| Chrome | Safari | Firefox | Ooper | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Töötab | 3,2+ | Töötab | 9,5+ | 9+ | Töötab | Töötab |
:first-of-typevõeti kasutusele CSS Selektorite moodulis 3, mis tähendab, et brauserite vanad versioonid seda ei toeta. Kuid tänapäevane brauseritugi on laitmatu ning uusi pseudovalijaid kasutatakse tootmiskeskkondades laialdaselt. Kui vajate vanemat brauserituge, siis kas IE jaoks täitke polüfill või kasutage neid valijaid mitte-kriitilistel viisidel, mida soovitatakse järk-järgult täiendada.