:first-of-typeSelectorul în CSS vă permite să direcționați prima apariție a unui element în interiorul recipientului acestuia. Este definit în specificațiile CSS Selectors Level 3 ca o „pseudo-clasă structurală”, ceea ce înseamnă că este folosit pentru stilizarea conținutului pe baza relației sale cu conținutul părinte și frate.
Să presupunem că avem un articol cu un titlu și mai multe paragrafe:
Paragraph 1.
Paragraph 2.
Paragraph 3.
Vrem să facem primul paragraf mai mare, ca un fel de „lede” sau paragraf introductiv. În loc să îi oferim o clasă, o putem :first-of-typeselecta:
p:first-of-type ( font-size: 1.25em; )Utilizarea :first-of-typeeste foarte asemănătoare, :nth-childdar cu o diferență critică: este mai puțin specifică. În exemplul de mai sus, dacă am fi folosit p:nth-child(1), nu s-ar întâmpla nimic deoarece paragraful nu este primul copil al părintelui său (the ). Aceasta dezvăluie puterea :first-of-type: vizează un anumit tip de element într-un anumit aranjament în raport cu frați similari, nu toți frații.
Exemplul mai complet de mai jos demonstrează utilizarea :first-of-typeși un selector de pseudo-clasă asociat :last-of-type,.
Suport pentru browser
| Crom | Safari | Firefox | Operă | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Lucrări | 3.2+ | Lucrări | 9.5+ | 9+ | Lucrări | Lucrări |
:first-of-typea fost introdus în CSS Selectors Module 3, ceea ce înseamnă că versiunile vechi ale browserelor nu o acceptă. Cu toate acestea, suportul modern pentru browser este impecabil, iar noile pseudo-selectoare sunt utilizate pe scară largă în mediile de producție. Dacă aveți nevoie de suport pentru browser mai vechi, fie polyfill pentru IE, fie utilizați acești selectori în moduri non-critice pentru îmbunătățirea progresivă, ceea ce este recomandat.