: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

Sıradaki ders: :not ve :is

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler