Çocuk seçici (>)
> çocuk birleştiricisini öğrenirsin.
Çocuk birleştiricisi: >
CSS'te > işareti bir çocuk birleştiricisi (child combinator) oluşturur. İki seçici arasına yazılır ve soldaki öğenin doğrudan çocuğu olan öğeleri hedefler.
nav > a, yalnızca nav öğesinin doğrudan çocuğu olan a etiketlerini seçer. Araya başka bir etiket girerse eşleşme olmaz. Bu keskin davranış menü ve liste yapılarında işine yarar.
Yalnızca bir seviye derin
Çocuk birleştiricisi derinlikte sınırlandırır. ul > li yazdığında, yalnızca ul öğesinin doğrudan çocuğu olan li etiketleri seçilir. İç içe geçmiş bir listenin alt seviyesindeki li öğeleri hedef dışı kalır.
Bu davranış anahtar: alt menü öğelerini biçimlemek istemezsen çocuk birleştiricisi kullan. Tüm seviyelere dokunmak istersen boşluk birleştiricisine geç — sonraki derste.
Uygulama Menü bağlantılarını renklendir
Bir nav > a seçicisi yaz ve içine color: navy bildirimi ekle. Böylece yalnızca menünün üst düzey bağlantıları navy rengini alır; alt menü bağlantıları değişmez.
Örnek çözümü göster
/* menü bağlantılarını renklendir */
nav > a {
color: navy;
}Kendini test et
-
Hangi yapıda nav > a eşleşir?
nav > a { color: navy; }- <nav><ul><a>Bağlantı</a></ul></nav>
- <nav><a>Bağlantı</a></nav>
- <nav><p><a>Bağlantı</a></p></nav>
- <nav><span>Metin</span></nav>
Cevabı göster
<nav><a>Bağlantı</a></nav> — Doğru. nav > a yalnızca nav'ın doğrudan çocuğu olan a etiketini yakalar.
-
nav'ın doğrudan a çocuğunu seç
____ { color: navy; }Cevabı göster
nav > a { color: navy; } -
Birleştiriciyi hedefine eşle
- nav > a
- Menüdeki üst düzey bağlantı
- ul > li
- Listenin birinci seviye öğesi
- section > h2
- Bölümün kendi başlığı
- article > p
- Yazının doğrudan paragrafı