Ö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; }