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