Şimdi efendim, bu web sitelerinin o göz alıcı tasarımları var ya, hani böyle baktıkça insanın içini açan, işte bunların temelinde yatan sihirli değneklerden biri de CSS seçicileri. Özellikle de hiyerarşi seçicileri, yani bir elementin diğerine olan ilişkisini kullanarak stil verme yöntemleri… Bazen bir şeyi tam istediğin gibi yapamayınca sinir krizi geçirecek gibi olursun ya, hani o an ‘neden böyle oluyor?’ diye düşünürsün ya, işte tam orada bu hiyerarşi seçicileri devreye giriyor.
Mesela düşünün, bir web sayfasında bir sürü kutucuk var, bir sürü yazı var, bir sürü buton var. Hepsinin kendine göre bir duruşu, bir rengi, bir boyutu var. Bu karmaşanın içinde, sen sadece belirli bir kutucuğun içindeki yazıya özel bir stil vermek istiyorsun. Veya bir listenin sadece ilk elemanına farklı bir efekt uygulamak istiyorsun. İşte tam bu noktada, “Tamam, bu elementin annesi şu, çocuğu bu, kardeşi şu” diye düşünerek stil verebiliyoruz. Bu da işleri inanılmaz kolaylaştırıyor, inanılır gibi değil.
Öncelikle, bu işin temelini oluşturan üç anahtar kelimemiz var: parent (ebeveyn), child (çocuk) ve sibling (kardeş). Bunlar, HTML yapısı içindeki elementlerin birbirleriyle olan ilişkisini tanımlıyor. Hani aile içindeki rolleri gibi düşünün; baba, anne, çocuklar, kuzenler… Web dünyasında da bu böyle. Bir element, kendi içinde başka elementler barındırabilir. Bu durumda o element, içindekilerin “parent”ı yani ebeveyni oluyor. İçerideki elementler de onun “child”ı yani çocuğu oluyor. Ne güzel değil mi?
Şimdi gelelim bu seçicilerin nasıl çalıştığına. En temel olanı “child selector” yani çocuk seçici. Bunu `>` işaretiyle gösteriyoruz. Diyelim ki bir `div` elementinin içinde bir `p` elementi var ve sen sadece o `div`’in içindeki `p`’ye stil vermek istiyorsun. O zaman şöyle bir şey yapıyorsun: `div > p { … }`. Bu, “Sadece doğrudan `div`’in çocuğu olan `p` elementlerini seç” demek oluyor. Altında başka `div`’ler falan olursa onlar etkilenmiyor. Tamamen doğrudan ilişkili olanlar. Bu arada, bu doğrudan ilişki çok önemli. Hani bazen birinden bir şey istersin de, aracılarla gelince tadı tuzu kaçar ya, bu da biraz öyle. Doğrudan olanı seçiyoruz.
Sonra bir de “descendant selector” yani torun seçici var. Bu da boşlukla gösteriliyor. Yani `div p { … }` yazdığında, bu sefer `div`’in içinde nerede olursa olsun, ister doğrudan çocuğu isterse çocuğunun çocuğu olsun, tüm `p` elementlerini seçiyor. Bu da işe yarıyor tabi, ama bazen daha spesifik olmak gerekiyor. Hani bir aile ağacı çiziyorsun ya, kökten başlayıp dallara ayrılan, işte bu da o ağacın herhangi bir yerindeki uygun elemanı seçmene yarıyor. Bana göre bu, daha geniş bir arama gibi. Emin değilim ama böyle olması lazım.
Gelelim “sibling selector” yani kardeş seçicilere. Bunlar da ikiye ayrılıyor. Birincisi “adjacent sibling selector”, yani hemen yanındaki kardeş. Bunu `+` işaretiyle gösteriyoruz. Mesela bir başlığın (`h2`) hemen altındaki paragrafı (`p`) seçmek istiyorsun. O zaman `h2 + p { … }` yazıyorsun. Bu, “`h2`’nin hemen ardından gelen `p`’yi seç” demek. Çok kullanışlı değil mi?
İkincisi ise “general sibling selector”, yani genel kardeş seçici. Bunu `~` işaretiyle gösteriyoruz. Bu da, bir elementle aynı ebeveyne sahip olan ve kendisinden sonra gelen tüm kardeşleri seçiyor. Yani `h2 ~ p { … }` yazdığında, `h2`’den sonra gelen ve aynı ebeveyne sahip olan *tüm* `p` elementlerini seçer. Bu, yanındaki hemen kardeş değil de, tüm kardeşler topluluğuna bir şeyler yapmak istediğinde kullanışlı oluyor. Mesela bir listedeki tüm item’lara bir stil vereceksin ama sadece ilkine vermeyeceksin, işte o zaman bu genel kardeş seçici işe yarayabilir.
Şimdi gelelim işin en can alıcı noktasına: Kod örneği! Çünkü lafla peynir gemisi yürümüyor, değil mi? Diyelim ki şöyle bir HTML yapımız var:
<div class="container"> <h2>Başlık 1</h2> <p>Bu ilk paragraf.</p> <div> <p>Bu içteki paragraf.</p> </div> <p>Bu ikinci paragraf.</p> <button>Buton</button> </div> <p>Bu dıştaki paragraf.</p>Şimdi bu yapıda, sadece `.container` div’inin doğrudan çocuğu olan `p` elementlerine kırmızı renk vermek istediğimizi varsayalım. Yani iç içe geçmiş olan `p`’yi değil, sadece ilk ve ikinci `p`’yi. Bunu yapmak için `>` işaretini kullanacağız, yani child selector’ı. Bu arada, bazen yanlışlıkla tüm `p`’leri seçip sonra hata yaptım diye düşünürsün ya, işte bu seçiciler o kafa karışıklığını önlüyor.
İşte yanlış yapılan bir deneme olabilirdi bu: `.container p { color: red; }`. Bu kod, `.container` içindeki *tüm* `p`’leri seçerdi, yani içteki `p` de kırmızı olurdu. Ama biz öyle istemiyoruz. Biz sadece doğrudan çocukları istiyoruz. Bu yüzden doğrusu şöyle:
.container > p { color: red; /* Sadece container'ın doğrudan çocukları kırmızı olacak */ }Şimdi bu kodla, sadece ilk ve ikinci `p` elementleri kırmızı olur. İçteki `p` etkilenmez. Ne güzel değil mi? Bu arada, bazen bu seçicileri karıştırıp CSS’in neden çalışmadığını anlamayan çok insan görüyorum. Hani sanki sihirli bir formül var da, o formülü yanlış yazmışsın gibi. Ama aslında olay bu kadar basit.
Peki ya kardeş seçicileri? Diyelim ki `h2`’den hemen sonra gelen `p`’yi mavi yapmak istiyoruz. O zaman `h2 + p` kullanırız. Yani şöyle:
h2 + p { color: blue; /* Sadece h2'nin hemen yanındaki p mavi olacak */ }Bu kod, ilk `p`’yi mavi yapar. Çünkü o `h2`’nin hemen ardında geliyor. Ama içteki `p` veya en sondaki `p` bu durumdan etkilenmez. Çünkü onlar `h2`’nin hemen yanındaki kardeş değiller. Eğer tüm `p`’leri seçmek isteseydik `h2 ~ p` kullanırdık, o zaman ilk ve ikinci `p`’ler mavi olurdu. Bu arada, bu `~` işareti biraz daha geniş bir kapsama alanı sağlıyor, hani böyle biraz daha rahat davranıyor gibi.
Neticede, bu parent, child ve sibling seçicileri, CSS yazarken bize inanılmaz bir kontrol sağlıyor. Karmaşık HTML yapılarında bile, istediğimiz elemente tam olarak istediğimiz stili uygulayabiliyoruz. Hani bazen bir şeyin tam yerini bulamazsın da, etrafına bakarsın ya, bu seçiciler de tam olarak o işi yapıyor. Web geliştirmenin temel taşlarından biri diyebilirim, yani bence. Bir de bu konuyu daha iyi anlamak istersen, şuraya bir bak derim: Google’da CSS Hiyerarşi Seçicileri. Orada da bol bol örnek bulabilirsin sanırım.
Sonuç olarak, bu seçiciler web tasarımının olmazsa olmazı. Onları doğru ve etkili bir şekilde kullanmak, kodunu daha temiz, daha okunabilir ve daha yönetilebilir hale getiriyor. Hani bazen bir kod bloğuna bakarız da, “Bu ne böyle?” deriz ya, işte bu seçiciler o “Bu ne böyle?” anlarını azaltıyor. O yüzden, yeni başlayanların bu konuya özellikle dikkat etmesi gerektiğini düşünüyorum. Zaten kullanması da çok zor değilmiş. Deneyince anlarsın.