:first-child ve :last-child

:first-child ve :last-child sözde sınıflarını öğrenirsin.

:first-child nedir?

:first-child sözde sınıfı, kardeşleri arasında ilk olan öğeyi seçer. :nth-child(1) ile aynı kapıya çıkar ama daha okunaklıdır.

Örneğin li:first-child, listenin en başındaki öğeyi yakalar. Bir menüde ilk bağlantıya farklı bir biçim vermek istediğinde nav a:first-child kullanırsın.

Bu sözde sınıf, konum tek başına anlamlıysa sınıf eklemekten kurtarır.

:last-child nedir?

:last-child, kardeşleri arasında son olan öğeyi seçer. :first-child'ın aynadaki yansımasıdır.

Bir yatay menüde nav a:last-child yazarak son bağlantıdan sonraki ayraç çizgisini kaldırabilirsin. Yine sınıf eklemeden, yalnızca konumla hedef alırsın.

Eğer öğe tek başınaysa — yani başka kardeşi yoksa — hem ilk hem son sayılır; her iki sözde sınıf da eşleşir.

Kenar boşluğu ve ayraç desenleri

:first-child ve :last-child en çok kenar boşluklarını ve ayraçları düzeltmek için kullanılır. Bir kart listesinde her öğeye margin-left verirsen, ilk öğe de kayar; bunu :first-child { margin-left: 0; } ile geri alırsın.

Benzer şekilde, bağlantılar arasına border-right koyduysan son bağlantıda fazlalık olur; :last-child onu kaldırır. Bu desen, esnek listelerde tutarlı görünüm sağlar.

Uygulama Menü başı ve sonuna özel biçim ver

İki bildirim yaz. Birincisi nav a:first-child seçicisi, içine font-weight: bold. İkincisi nav a:last-child seçicisi, içine border-right: none. Her ikisi de kendi { } bloğunda olsun.

Örnek çözümü göster

/* menü başı ve sonu için stiller ekle */
nav a:first-child {
  font-weight: bold;
}
nav a:last-child {
  border-right: none;
}

Kendini test et

li:first-child hangi öğeyi eşleştirir?
```
li:first-child {
  font-weight: bold;
}
```
- Listenin son öğesini
- İçinde 'first' sınıfı olan öğeyi
- Listenin tüm öğelerini
- Listenin ilk öğesini
Cevabı göster

Listenin ilk öğesini — Doğru. :first-child, kardeşler arasındaki ilk öğeyi seçer.

Menünün son bağlantısı için seçici yaz

nav a____ {
  border-right: none;
}

Cevabı göster

nav a:last-child {
  border-right: none;
}

Sözde sınıfı konumuyla eşleştir

:first-child

İlk kardeş
:last-child

Son kardeş
:nth-child(2)

İkinci kardeş
:nth-child(even)

Çift sıradakiler

Sıradaki ders: :checked ve :disabled

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler