Zebra çizgiler

:nth-child(even) ile zebra çizgili tablo öğrenirsin.

Zebra çizgiler nedir?

Zebra çizgiler, tablo satırlarına sırayla farklı arka plan renkleri vermektir. Göz, çift ve tek satırları ayırt ederek uzun listelerde kaybolmayı önler. CSS'te :nth-child(even) ve :nth-child(odd) seçicileriyle yapılır.

Örnek: tr:nth-child(even) { background: #f1f5f9; }. Bu bildirim çift numaralı satırları açık gri yapar; tek satırlar varsayılan renginde kalır. Uzun satış raporlarında okunabilirliği artırır.

Even ve odd farkı

:nth-child(even) 2, 4, 6... sıradaki satırları seçer; :nth-child(odd) 1, 3, 5... sıradakileri. Hangisini koyu, hangisini açık yapacağını kendin belirlersin.

Birçoğu çift satırları açık gri yapar; ama tersini seçmek de aynı etkiyi verir. Önemli olan iki satır tipinin görsel olarak ayrışmasıdır. Zebra adı buradan gelir: atların siyah-beyaz desenleri gibi.

Uygulama Kullanıcı listesine zebra çizgi ekle

Bir .kullanicilar sınıflı tabloya zebra çizgi ekle: .kullanicilar tr:nth-child(even) seçicisine background: #f1f5f9; yaz. Ayrıca .kullanicilar td, .kullanicilar th seçicisine padding: 10px; ekle.

Örnek çözümü göster

.kullanicilar tr:nth-child(even) seçicisi aç, içine background: #f1f5f9; yaz. Sonra .kullanicilar td, .kullanicilar th seçicisi aç, içine padding: 10px; yaz.
Örnek çözüm:
.kullanicilar tr:nth-child(even) {
  background: #f1f5f9;
}
.kullanicilar td, .kullanicilar th {
  padding: 10px;
}

Kendini test et

Hangi seçici çift numaralı satırları seçer?
```
/* ? seçici çift satırlara arka plan verir */
```
- tr:nth-child(odd)
- tr:even
- tr.even
- tr:nth-child(even)
Cevabı göster

tr:nth-child(even) — Doğru! tr:nth-child(even) çift numaralı satırları seçer.

Çift satırları seçen seçici

____ {
  background: #f1f5f9;
}

Cevabı göster

tr:nth-child(even) {
  background: #f1f5f9;
}

Sözde sınıfları eşleştir

:nth-child(even)

çift satırlar
:nth-child(odd)

tek satırlar
:hover

üzerine gelince
:first-child

ilk öğe

Sıradaki ders: Hover satırı

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler