:first-childSeçici başka elemanın içine hemen ilk elemanı 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.
Bir makalemiz olduğunu ve ilk paragrafı bir "lede" veya bir giriş metni gibi daha büyük yapmak istediğimizi varsayalım:
First paragraph…
Lorem ipsum…
Dolor sit amet…
Consectetur adipisicing…
Ona bir sınıf vermek yerine (örneğin .first), onu :first-childseçmek için kullanabiliriz :
p:first-child ( font-size: 1.5em; )Kullanımı :first-childçok benzer, :first-of-typeancak kritik bir farkla: daha az spesifiktir. HTML'de kesinlikle ilk sırada gelmese bile :first-child, bir üst öğenin yalnızca ilk alt öğesini first-of-typeeşleştirmeye çalışır , ancak belirtilen öğenin ilk oluşumuyla eşleşir. Yukarıdaki örnekte, sonuç aynı olacaktır, çünkü öğenin ilk çocuğu articleda ilk pöğe olacaktır. Bu, gücünü ortaya çıkarır :first-child: Sadece aynı türden kardeşlerle değil, tüm kardeşleriyle ilişkili bir öğeyi tanımlayabilir.
Aşağıdaki daha eksiksiz örnek, :first-childve ilgili bir sözde sınıf seçicisinin kullanımını göstermektedir :last-child.
Tarayıcı Desteği
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Hiç | 3.2+ | Hiç | 9.5+ | 9+ | Hiç | Hiç |
:first-childCSS 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.