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