:first-of-typeCSS selektors ļauj mērķēt pirmais gadījums kāda elementa ietvaros savā traukā. CSS Selectors 3. līmeņa specifikācijā tas ir definēts kā “strukturāla pseidoklase”, kas nozīmē, ka to lieto satura veidošanai, pamatojoties uz tā attiecībām ar vecāku un brāļu saturu.
Pieņemsim, ka mums ir raksts ar nosaukumu un vairākām rindkopām:
Paragraph 1.
Paragraph 2.
Paragraph 3.
Mēs vēlamies palielināt pirmo rindkopu kā sava veida “ledi” vai ievaddaļu. Tā vietā, lai piešķirtu tai klasi, mēs varam to izmantot :first-of-type:
p:first-of-type ( font-size: 1.25em; )Lietošana :first-of-typeir ļoti līdzīga, :nth-childbet ar vienu kritisku atšķirību: tā ir mazāk specifiska. Iepriekš minētajā piemērā, ja mēs būtu izmantojuši p:nth-child(1), nekas nenotiktu, jo šī rindkopa nav tās vecāku pirmais bērns . Tas atklāj spēku :first-of-type: tas ir vērsts uz noteiktu elementu tipu noteiktā kārtībā attiecībā uz līdzīgiem brāļiem un māsām, nevis visiem brāļiem un māsām.
Tālāk sniegtajā pilnīgākajā piemērā parādīts :first-of-typepseidoklases selektora un ar to saistītā selektora lietojums :last-of-type.
Pārlūka atbalsts
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Darbi | 3.2+ | Darbi | 9,5+ | 9+ | Darbi | Darbi |
:first-of-typetika ieviests CSS selektoru 3. modulī, kas nozīmē, ka vecās pārlūkprogrammu versijas to neatbalsta. Tomēr mūsdienu pārlūka atbalsts ir nevainojams, un jaunie pseido-selektori tiek plaši izmantoti ražošanas vidēs. Ja jums ir nepieciešams vecāks pārlūka atbalsts, vai nu IE polifill, vai arī izmantojiet šos atlasītājus nekritiskos veidos, kas ir ieteicami pakāpeniski.