Ç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ı

Sıradaki ders: Torun seçici (boşluk)

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler