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

Sıradaki ders: Meydan okuma - Modern düzen

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler