Kardeş seçiciler (+ ve ~)

+ bitişik kardeş ve ~ genel kardeş birleştiricilerini öğrenirsin.

Bitişik kardeş birleştirici: +

+ işareti bitişik kardeş (adjacent sibling) birleştiricidir. Aynı ebeveyne sahip olan ve soldaki öğeden hemen sonra gelen öğeyi hedefler.

h2 + p yazarsan, bir h2 öğesinin hemen ardında gelen paragrafı seçersin. Araya başka etiket girerse eşleşme olmaz. Bu davranış, başlık sonrası ilk paragrafa özel stil vermek için idealdir.

Genel kardeş birleştirici: ~

~ işareti genel kardeş (general sibling) birleştiricidir. Soldaki öğeden sonra gelen ve aynı ebeveyne sahip tüm öğeleri hedefler; aralarında başka kardeşler olabilir.

h2 ~ p yazarsan, bir h2'nin ardından gelen tüm paragraflar seçilir. Bu, başlık sonrası tüm paragraflara aynı stili vermek için kullanışlıdır.

İkisinin farkı ne?

İki kardeş birleştirici de aynı ebeveyne bakar; farkı mesafetedir. + yalnızca hemen ardındaki öğeyi seçer. ~ ise ardında kalan tüm kardeşleri seçer.

Menüde ilk bağlantıyı öne çıkarmak için li + li sıkça kullanılır: her li'den sonraki li'ye ayırıcı ekler; ilk öğe etkilenmez. Bu küçük desen, liste ayraçlarını tek satırda çözer.

Uygulama Başlık sonrası paragrafı sıfırla

Bir h2 + p seçicisi yaz ve içine margin-top: 0 bildirimi ekle. Böylece her başlığın hemen ardındaki paragraf, üst boşluğu sıfırlanmış olarak başlar.

Örnek çözümü göster

/* başlık sonrası paragrafı düzenle */
h2 + p {
  margin-top: 0;
}

Kendini test et

h2 + p neyi hedefler?
```
h2 + p {
  margin-top: 0;
}
```
- h2 öğesinden sonra gelen tüm paragrafları
- h2 öğesinin doğrudan çocuğu olan paragrafı
- h2 öğesinin hemen ardındaki tek bir paragrafı
- h2 öğesinin tüm kardeşlerini
Cevabı göster

h2 öğesinin hemen ardındaki tek bir paragrafı — Doğru. + birleştiricisi yalnızca h2'nin hemen ardındaki tek paragrafı yakalar.
h2'nin hemen ardındaki paragrafı seç
```
____ {
  margin-top: 0;
}
```
Cevabı göster
```
h2 + p {
  margin-top: 0;
}
```
Birleştiriciyi anlamına eşle

h2 + p

Başlığın hemen ardındaki paragraf
h2 ~ p

Başlıktan sonraki tüm paragraflar
nav > a

Menünün doğrudan bağlantısı
article p

Yazıdaki tüm paragraflar

Sıradaki ders: Öznitelik seçici desenleri

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler