:first-of-typeCSS'deki seçici onun kapsayıcı içindeki bir elementin ilk oluşumunu hedef sağlar. CSS Seçiciler Seviye 3 spesifikasyonunda "yapısal sözde sınıf" olarak tanımlanmıştır, yani içeriği ana ve kardeş içeriğiyle olan ilişkisine göre biçimlendirmek için kullanılır.
Başlığı ve birkaç paragrafı olan bir makalemiz olduğunu varsayalım:
Paragraph 1.
Paragraph 2.
Paragraph 3.
İlk paragrafı bir tür "lede" veya giriş paragrafı olarak daha büyük yapmak istiyoruz. Ona bir sınıf vermek yerine, onu :first-of-typeseçmek için kullanabiliriz :
p:first-of-type ( font-size: 1.25em; )Kullanımı :first-of-typeçok benzer, :nth-childancak kritik bir farkla: daha az spesifiktir. Yukarıdaki örnekte, kullanmış p:nth-child(1)olsaydık, hiçbir şey olmazdı çünkü paragraf, ebeveyninin (the ) ilk çocuğu değildir . Bu :first-of-type, tüm kardeşlerle değil, benzer kardeşlerle ilişkili belirli bir düzenlemede belirli bir öğe türünü hedefler.
Aşağıdaki daha eksiksiz örnek, :first-of-typeve ilgili bir sözde sınıf seçicisinin kullanımını göstermektedir :last-of-type.
Tarayıcı Desteği
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| İşler | 3.2+ | İşler | 9.5+ | 9+ | İşler | İşler |
:first-of-typeCSS Seçiciler Modül 3'te tanıtıldı, yani tarayıcıların eski sürümleri onu desteklemiyor. Bununla birlikte, modern tarayıcı desteği kusursuzdur ve yeni sözde seçiciler, üretim ortamlarında yaygın olarak kullanılmaktadır. Daha eski bir tarayıcı desteğine ihtiyacınız varsa, ya IE için çoklu doldurma ya da bu seçicileri, tavsiye edilen aşamalı geliştirme gibi kritik olmayan şekillerde kullanın.