Özet - Etkileşimli liste

CSS kursu · Orta seviye · Ders 18/98

Sözde sınıflarla etkileşimli liste arayüzü kurarsın.

Özet - Etkileşimli liste

Bu özette, bu grupta öğrendiğin sözde sınıfları bir araya getirerek etkileşimli bir liste arayüzü kuracaksın. Liste öğeleri fareyle üzerine gelince vurgulanacak, tek sıradakiler hafif bir arka plan alacak ve etkin olmayanlar soluk görünecek.

Kullanacaklarımız:

li:hover — fare üzerindeyken vurgu
li:nth-child(odd) — zebra çizgi
li:not(.active) — etkin olmayanları solukla

Sözde sınıfları birleştirme

Tek bir stil sayfasında birden çok sözde sınıf yan yana çalışır. Her biri farklı bir durumu hedef alır; tarayıcı hepsini bağımsız uygular.

Örneğin liste öğelerinde aynı anda üç şey isteyebilirsin: üzerine gelince vurgu (:hover), zebra çizgi (:nth-child(odd)) ve etkin olmayanların soluk görünmesi (:not(.active)). Üç ayrı bildirim yazarsın; hiçbiri diğerini bozmaz.

Uygulama Etkileşimli liste stillerini yaz

Üç bildirim yaz. Birincisi li:hover seçicisi, içine background: #eef. İkincisi li:nth-child(odd) seçicisi, içine background: #f7f7f7. Üçüncüsü li:not(.active) seçicisi, içine color: #888. Her biri kendi { } bloğunda olsun.

Örnek çözümü göster

/* liste öğelerinin etkileşim stillerini ekle */
li:hover {
  background: #eef;
}
li:nth-child(odd) {
  background: #f7f7f7;
}
li:not(.active) {
  color: #888;
}

Sözde sınıfların gücü

Bu grupta sözde sınıfların bir öğenin durumunu ve konumunu nasıl yakaladığını gördün. :hover ve :focus etkileşimi, :nth-child sırayı, :not ve :is filtrelemeyi, :first-child ile :last-child uçları, :checked ve :disabled form durumlarını verir.

Artık JavaScript'siz, yalnızca CSS ile kullanıcıya yanıt veren arayüzler kurabilirsin. Sonraki gruplarda bu sözde sınıfları ızgara ve esnek kutu düzenleriyle birleştireceksin.

Kendini test et

Tek sıradaki liste öğelerini hangi sözde sınıf seçer?
- li:first-child
- li:not(.active)
- li:nth-child(odd)
- li:hover
Cevabı göster

li:nth-child(odd) — Doğru. :nth-child(odd), 1., 3., 5. sıradaki öğeleri eşleştirir.
Sözde sınıfı listedeki göreviyle eşleştir

:hover

Fare üzerinde vurgu
:nth-child(odd)

Zebra çizgi
:not(.active)

Etkin olmayanı solukla
:focus

Klavyeyle odak

Özet - Etkileşimli liste