:nth-child
:nth-child ile kardeş seçimini öğrenirsin.
:nth-child nedir?
:nth-child sözde sınıfı, bir öğeyi kardeşleri arasındaki sırasına göre seçer. Parantez içinde bir sayı ya da formül verirsin.
Örneğin li:nth-child(2), liste içindeki ikinci öğeyi yakalar. tr:nth-child(3) ise tablodaki üçüncü satırı eşleştirir. Sıra bir tabandan başlar, sıfırdan değil.
Bu sözde sınıf, sınıf eklemek yerine yalnızca konumla stillendirme yapmanı sağlar.
even ve odd ile zebra çizgiler
Paranteze even yazarsan çift sıradaki, odd yazarsan tek sıradaki kardeşler seçilir. İngilizce even çift, odd tek demektir.
Bu, uzun tablolarda zebra çizgili (alternatif arka plan) görünüm yaratmanın standart yoludur. tr:nth-child(even) { background: #f5f5f5; } yazarsan her ikinci satır gri olur; okuma kolaylaşır.
n değişkeni ile formüller
:nth-child, an+b formülünü de kabul eder. Burada n sıfırdan başlayan bir sayıcıdır.
2n— çift sıra (even ile aynı)2n+1— tek sıra (odd ile aynı)3n— her üçüncü öğe
Formüller yalnızca tekil sayıları değil, düzenli aralıkları yakalar. Bu, büyük listelerde belirli aralıklarla vurgu yapmak için kullanışlıdır.
Uygulama Tabloya zebra çizgi ekle
Bir tr:nth-child(even) seçicisi yaz ve içine background: #f5f5f5 ekle. Böylece tablodaki çift sıradaki satırlar açık gri olur.
Örnek çözümü göster
/* çift sıradaki satırları renklendir */
tr:nth-child(even) {
background: #f5f5f5;
}Kendini test et
-
li:nth-child(2) hangi öğeyi eşleştirir?
li:nth-child(2) { font-weight: bold; }- Listedeki son öğeyi
- Listedeki tüm öğeleri
- Listedeki ikinci öğeyi
- İkinci listenin tüm öğelerini
Cevabı göster
Listedeki ikinci öğeyi — Doğru. :nth-child(2), kardeşler arasındaki ikinci öğeyi seçer.
-
Tek sıradaki liste öğeleri için seçici yaz
li____ { background: #fafafa; }Cevabı göster
li:nth-child(odd) { background: #fafafa; } -
Formülü eşleştirdiği sırayla eşleştir
- :nth-child(1)
- İlk öğe
- :nth-child(2)
- İkinci öğe
- :nth-child(even)
- Çift sıradakiler
- :nth-child(odd)
- Tek sıradakiler