Özet - Breadcrumb menü

İleri seçicilerle breadcrumb menü kurarsın.

Beş seçici, tek menü

Bu grupta beş aracı öğrendin: çocuk (>), torun (boşluk), bitişik kardeş (+), öznitelik desenleri (^$*) ve :has. Şimdi bunları bir breadcrumb menüde birleştireceksin.

Breadcrumb, kullanıcının bulunduğu sayfanın yolunu gösterir. Her adımı bağlantı, son adımı ise düz metin olarak işaretleriz. İleri seçiciler bu ayrımı tek satırda yapmanı sağlar.

Uygulama Breadcrumb temel stilleri

İki stil bloğu ekle. Birincisi nav.breadcrumb a seçicisi; color: navy tanımlasın. İkincisi nav.breadcrumb > span seçicisi; color: gray tanımlasın. Böylece bağlantılar navy, ayraçlar gri olur.

Örnek çözümü göster

/* breadcrumb temel stilleri */
nav.breadcrumb a {
  color: navy;
}
nav.breadcrumb > span {
  color: gray;
}

Uygulama Aktif adımı ve görsel bağlantıyı işaretle

İki stil bloğu daha ekle. Birincisi a[href*="current"] seçicisi; font-weight: bold tanımlasın. İkincisi a:has(> img) seçicisi; display: block tanımlasın. Böylece aktif adım koyu, görsel bağlantıları ise blok olur.

Örnek çözümü göster

/* aktif adım ve görsel bağlantı */
a[href*="current"] {
  font-weight: bold;
}
a:has(> img) {
  display: block;
}

Kendini test et

Hangi seçici 'login' içeren bağlantıları yakalar?
```
a[href*="login"] {
  font-weight: bold;
}
```
- href değeri 'login' ile başlayan bağlantıları
- href değeri 'login' ile biten bağlantıları
- href değeri 'login' içeren tüm bağlantıları
- Yalnızca href özniteliği olmayanları
Cevabı göster

href değeri 'login' içeren tüm bağlantıları — Doğru. * işareti alt dize eşleştirir; 'login' geçen tüm bağlantılar yakalanır.

Breadcrumb içindeki bağlantıları seç

____ {
  display: flex;
  gap: 0.5rem;
}

Cevabı göster

nav.breadcrumb a {
  display: flex;
  gap: 0.5rem;
}

Sıradaki ders: Proje: Landing sayfası

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler