Yükleniyor...

CSS Birleştiriciler

Öğe, class ve id seçicileriyle hedefleri zaten biliyorsunuz. Sıradaki beceri: bir öğeyi başka birine göre durduğu yer yüzünden biçimlendirmek — bir bölümün içinde, yalnızca doğrudan çocuk olarak veya bir başlığın hemen ardından.

CSS birleştiriciler nedir?

CSS birleştirici, iki seçici arasına konan bir simge (veya boşluktur). Tarayıcıya bu iki parçanın HTML ağacında nasıl ilişkili olması gerektiğini söyler. Sol taraf referanstır; sağ taraf stilleri gerçekten alan öğedir.

Dört birleştiriciye hızlı bakış

Önce simgeleri öğrenin; sonra her birini kısa bir örnekle deneyin.

📊 CSS birleştiriciler

Birleştirici Simge Ne eşleşir Örnek
Soy (descendant) (boşluk) Bir atanın içindeki her iç içe eşleşme article p
Çocuk > Yalnızca doğrudan çocuk ul > li
Bitişik kardeş + Hemen sonraki kardeş h2 + p
Genel kardeş ~ Aynı düzeydeki sonraki herhangi bir kardeş h2 ~ p

Soy birleştirici (boşluk)

Seçiciler arasındaki boşluk «ikinci seçiciyi birincinin içinde herhangi bir yerde eşleştir» demektir. Derinlik önemli değildir — torun ve daha derin düzeyler de eşleşir.

Soy — article içindeki paragraflar

css
CSS Code 
article p {
color: #334155;
line-height: 1.6;
}

Soy ne zaman işe yarar

Bir bölgede ortak görünüm için soy kullanın: bir article içindeki tüm paragraflar, bir nav içindeki tüm bağlantılar. Yalnızca doğrudan çocuk istiyorsanız ve derin eşleşmeler fazla genişse çocuk birleştiriciye geçin.

Çocuk birleştirici (>)

> yalnızca doğrudan çocukları eşleştirir. Bir düzeyden daha derin iç içe öğe eşleşmez.

Çocuk — yalnızca doğrudan liste öğeleri

css
CSS Code 
.menu > li {
list-style: none;
padding: 0.5rem 1rem;
}

Boşluk ile > tek bir resimde

HTML <ul class="menu"><li>One<ul><li>Nested</li></ul></li></ul> ise .menu > li yalnızca dış liyi biçimlendirir. Soy .menu li hem dış hem iç içe liyi biçimlendirir.

Bitişik kardeş birleştirici (+)

+, kardeş referansından hemen sonra gelen öğeyi eşleştirir — aynı ebeveyn, yan kapı, arada başka öğe yok.

Bitişik kardeş — h2'den sonraki ilk paragraf

css
CSS Code 
h2 + p {
font-size: 1.125rem;
color: #0f766e;
}

Yaygın bir kalıp

Birçok düzen, başlıktan sonraki ilk paragrafın biraz farklı görünmesini ister (giriş metni). h2 + p her paragrafa ayrı class vermeden o komşuyu hedefler.

Genel kardeş birleştirici (~)

~, ikinci seçiciye uyan her sonraki kardeşi eşleştirir — yalnızca hemen sonraki değil. Hâlâ aynı ebeveyni paylaşmaları gerekir.

Genel kardeş — h2'den sonraki paragraflar

css
CSS Code 
h2 ~ p {
max-width: 40rem;
}

+ ile ~

  • h2 + p — yalnızca h2nin hemen ardından gelen paragraf
  • h2 ~ p — o h2den sonra gelen her kardeş p (birinci, ikinci, üçüncü…)
    h2 ile bir p arasında div varsa o p için h2 + p başarısız olur; h2 ~ p yine sonraki kardeş paragrafları eşleştirebilir.

Hangi birleştiriciyi seçmeli

  • «Bu bölgede bu türden her şey» için soy
  • İç içelik istemediğiniz listeleri veya widget'ları biçimlendirecekse çocuk
  • Tek adımlık komşu kalıbı (başlık → ilk paragraf) için bitişik kardeş
  • Bir işaretten sonra birkaç akranın aynı görünümü paylaşması gerekiyorsa genel kardeş
    Öğrenirken zincirleri kısa tutun. Uzun zincirler güçlüdür — HTML değişince kolay kırılır.

Kendiniz deneyin

  1. İçinde <h2>, bir <p>, içinde başka bir <p> olan bir <div> ve divden sonra bir <p> daha bulunan küçük bir <article> sayfası kurun.
  2. article p { color: #334155; } ekleyin; article içindeki her iki paragrafın değiştiğini doğrulayın (soy).
  3. Kuralı article > p { color: #0f766e; } yapıp yenileyin — yalnızca doğrudan çocuk paragraflar o rengi korumalı; div içindeki p değil.
  4. h2 + p { font-weight: bold; } ekleyin; yalnızca başlığın hemen ardından gelen paragraf kalın olsun.
  5. İsteğe bağlı: h2 ~ p { max-width: 36rem; } deneyin — başlıktan sonraki her kardeş paragraf max-width alsın.

Sık yapılan hatalar

  • Çocuk yerine soy kullanmak — iç içe widget'lar yalnızca üst düzey için istediğiniz stilleri alır
  • h2 + pnin başlık ile paragraf arasındaki öğeyi atlamasını beklemek — bitişik hemen demektir
  • Birleştiriciyi ters okumak — stiller sağdaki seçiciye gider, sol referansa değil
  • Birleştirici yerine virgül koymak (h2, p gruplar; «h2'den sonra p» değildir)
  • ~nin yapışık komşu istediğini sanmak — genel kardeş yalnızca «sonraki kardeş» ister

Özet

  • Birleştiriciler seçicileri HTML ilişkisiyle birleştirir: içinde, doğrudan çocuk, sonraki kardeş veya sonraki kardeşler
  • Boşluk = soy (her derinlik); > = yalnızca doğrudan çocuk
  • + = hemen sonraki kardeş; ~ = eşleşen herhangi bir sonraki kardeş
  • Stiller birleştiricinin sağındaki seçiciye uygulanır
  • Niyetinizi hâlâ anlatan en dar birleştiriciyi seçin
  • Boşluğu > ile değiştirip + ile ~yi aynı sayfada karşılaştırarak pratik yapın

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓
7
Sorular
🎯
70%
Geçmek İçin
♾️
∞
Süre
🔄
∞
Deneme

📝 Talimatlar

  • Her soruyu dikkatle okuyun
  • Her soru için en iyi cevabı seçin
  • Quiz'i istediğiniz kadar tekrar alabilirsiniz
  • İlerlemeniz üstte gösterilecek
Konu 1 / 1
Css Ders