: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