Meydan okuma - İleri seçiciler
İleri seçicilerle bileşik liste arayüzü kurarsın.
İleri seçicilerle bileşik liste
İleri seçiciler, iç içe geçmiş listelerde tek satır CSS ile biçim verir. Çocuk seçici > yalnız doğrudan çocukları seçer; kardeş seçici + hemen ardından geleni, ~ sonrasındaki tüm kardeşleri seçer.
:nth-child(odd) tek sıraları, :has(> .active) içinde aktif çocuk barındıranları seçer. Dört seçici birleşince menü, sekme ve tablo gibi bileşik arayüzler tek blokta kurulur.
Uygulama Bileşik liste arayüzünü tamamla
Aşağıdaki CSS'i tamamla. .menu > li çocuk seçicisine padding-left: 1rem ver. .menu li + li kardeş seçicisine border-top: 1px solid #e5e7eb ekle. .menu:has(.active) bildirimine background: #f0fdf4 ver.
Örnek çözümü göster
/* doğrudan çocuklar */
.menu > li {
padding-left: 1rem;
}
/* ardışık kardeşler */
.menu li + li {
border-top: 1px solid #e5e7eb;
}
/* aktif öğe varsa */
.menu:has(.active) {
background: #f0fdf4;
}Kendini test et
-
Çocuk seçicinin sağ tarafını yaz
.menu > ____ { padding-left: 1rem; }Cevabı göster
.menu > li { padding-left: 1rem; } -
:has(.active) seçicisi neyi eşler?
.menu:has(.active) { background: #f0fdf4; }- Yalnız .active sınıfını
- .active olmayanları
- İçinde .active barındıranı
- İlk .active öğesini
Cevabı göster
İçinde .active barındıranı — Doğru. :has() içeride bir öğe barındıran üst öğeyi seçer; içeriye bakar.
-
Seçiciyi rolüyle eşle
- >
- Doğrudan çocuğu seçer
- +
- Hemen sonraki kardeşi seçer
- ~
- Sonraki tüm kardeşleri seçer
- :nth-child(odd)
- Tek sıradakileri seçer