CSS’de Bitişik ve Doğrudan Çocuk Seçicileri
eminbasbayan
İçindekiler
Bu yazıda neler var?
CSS'de farklı öğeleri seçmek ve onlara stil vermek için çeşitli seçiciler kullanırız. Bazı seçiciler oldukça yaygın kullanılırken, bazıları daha az bilinir ancak yine de belirli durumlarda çok işe yarar. Bu yazıda, yazılım dünyasına yeni adım atanlar için iki önemli kombinator olan bitişik (adjacent) seçici ve doğrudan çocuk (direct child) seçici konularına değineceğiz.
Bitişik (Adjacent) Seçici (+)
Bitişik seçici, bir öğenin hemen ardından gelen kardeş öğeyi seçmek için kullanılır. İki öğe aynı seviyede olmalı, yani biri diğerinin içinde olmamalıdır.
Kullanımı:
h2 + div {
background-color: yellow;
}Yukarıdaki kod, bir h2 etiketinden hemen sonra gelen div etiketine sarı arka plan rengi verir.
Örnek Senaryo
Diyelim ki, bir makalemiz var ve makalenin hemen ardından bir bilgilendirme kutusu (div) geliyor. Bitişik seçici ile sadece makaleden hemen sonra gelen kutuya özel bir stil verebiliriz.
article + div {
border: 2px solid red;
}Bu kod, yalnızca bir article elemanından hemen sonra gelen div elemanının kenarlığını kırmızı yapacaktır.
Eğer sayfanızda birden fazla article ve div varsa, sadece birbirini takip edenler etkilenir. Aşağıdaki HTML yapısında sadece ilk bilgilendirme kutusu etkilenir:
<article>İlk makale</article>
<div>Bilgilendirme Kutusu</div>
<article>İkinci makale</article>
<div>İkinci Bilgilendirme Kutusu</div>Yukarıdaki örnekte, ilk article ve ardından gelen div etkilenir, ancak ikinci bilgilendirme kutusu bu kuraldan etkilenmeyecektir, çünkü hemen öncesinde başka bir öğe olabilir.
Doğrudan Çocuk (Direct Child) Seçici (>)
Doğrudan çocuk seçici, bir öğenin doğrudan içine eklenmiş alt öğeleri seçmek için kullanılır. Genel descendant seçici (boşluk) ile farkı, yalnızca doğrudan çocukları seçmesidir. Eğer bir öğe başka bir öğenin içine gömülmüşse ancak doğrudan çocuk değilse, bu seçici onu etkilemez.
Kullanımı:
section > h3 {
font-size: 22px;
}Bu CSS kodu, sadece bir section içinde doğrudan bulunan h3 etiketlerine 22 piksel yazı boyutu uygular. Eğer h3 başka bir elemanın (örneğin bir div içinde) içinde olursa, etkilenmez.
Örnek Senaryo
Diyelim ki, bir aside elemanımız var ve içinde birkaç bilgi kutusu (div) var. Ancak biz sadece aside elemanına doğrudan bağlı olan kutulara özel bir stil vermek istiyoruz.
aside > div {
padding: 10px;
background-color: lightgray;
}Bu CSS kodu, aside içinde doğrudan bulunan div öğelerine açık gri arka plan rengi verir. Eğer div başka bir section, ul, nav gibi bir öğenin içine yerleştirilmişse, bu stil uygulanmaz.
Örneğin aşağıdaki HTML yapısında sadece ilk div etkilenir:
<aside>
<div>Doğrudan aside içinde</div> <!-- Etkilenecek -->
<section>
<div>Başka bir bölüm içinde</div> <!-- Etkilenmeyecek -->
</section>
</aside>Burada section içindeki div etiketi aside'ın doğrudan çocuğu olmadığı için seçilmez.
Sonuç
Bitişik (+) ve doğrudan çocuk (>) seçicileri, HTML yapımızı daha hassas bir şekilde seçmemize ve özelleştirmemize yardımcı olur. Bitişik seçici yan yana gelen öğeleri, doğrudan çocuk seçici ise bir öğenin içine eklenen direkt çocuklarını hedefler.
Bu seçicileri kullanarak CSS kodunuzu daha etkili hale getirebilir ve gereksiz stil değişikliklerinden kaçınabilirsiniz. Yeni başlayan biri olarak, CSS seçicileri üzerinde bol bol pratik yaparak farklarını gözlemlemek, ilerleyen süreçte daha profesyonel bir şekilde stil vermenizi sağlayacaktır.
