Web sitesi yapmak zahmetli ama eğlenceli bir iştir. Tasarımından, front-end ve back-end yazılımına ve UI/UX testlerine kadar pek çok alanı kapsayan kompleks bir iştir. Ben özellikle front-end kısmını çok severim. Kullanıcı arayüzlerini programlamak, tasarımı sadece bir resim halinden çıkarıp, canlı ve etkileşimli bir HTML dokümanı haline getirmek, saatlerce sıkılmadan yapabileceğim bir iştir.
Bu işi yaparken karşılaştığım zorlukları aşabilmek için pek çok web sitesinden ilham ve/veya çözüm yöntemi ararım. Benzer durumları nasıl çözdüğünü incelerim. Front-end kullanılan kodlar tarayıcıda çalışan scriptlerden oluştuğu için sürekli herkese açıktır ve ön yüz geliştiricileri birbirlerinin kodları görebilirler ve inceleyebilirler. İncelenen bir sitenin CSSsyi nasıl kurgulamış, uygulanan JS çözümleri neye göre yazıldığı gibi pek çok araştırmalar yaparken ortak bir akıl gibi davranır ve sorunlarımızı beraberce çözeriz. Bu yazımda bazı web sitelerinde CSS kodlarını incelerken sık sık gördüğümüz özel karakterlerden bahsedeceğim.
Bazı sitelerde, kaynak kodlarını incelerken, CSS kodlarında >, + ve ~ sembollerinin selektörler arasında kullanıldığını görürsünüz. Bildiğiniz gibi selektör CSS'de stili düzenlenecek HTML'elemanını seçmek için kullanılır.
Normalde alışık olduğunuz gibi bir CSS selektör yapısında, '#', '.', ':' gibi bazı semboller ile çeşitli erişim yolları kurarız. Ancak yukarıda belirttiğim semboller bazı özel durumlarda bize yardımcı olmaktadırlar.
Örneğin aşağıdaki gibi bir yazımda id'si kutu olan div içindeki tüm p elemanların yazı karakterleri bold olacaktır.
<style>
div#kutu p{
font-weight:bold;
}
</style>
<div id="kutu">
<p>İlk paragraf elemanı </p>
<div id="icKutu">
<p>İçerdeki Div'in içindeki paragraf elemanı</p>
</div>
<p>İkinci paragraf elemanı</p>
<p>Üçüncü paragraf elemanı</p>
</div>
CSS'de '>' sembolünün kullanımı
Diyelim ki biz sadece #kutu divi içindeki p'lerin bold olmasını, #icKutu elemanındaki p'nin normal olmasını istiyoruz Bunun için CSS koduna,
#icKutu p{font-weight:normal !important;}
Şeklinde bir satır ekleyerek p elemanına etki eden önceki CSS kodunu ezmemiz gerekmektedir.
CSS kodlarken kod ezme işlemleri genelde istenmeyen bir durumdur. Mümkün olduğu kadar bu yoldan kaçınmak gerekir. İşte > işareti tam da bu noktada imdadımıza yetişiyor. Kodu yeniden düzenleyelim.
<style>
div#kutu > p{
font-weight:bold;
}
</style>
<div id="kutu">
<p>İlk paragraf elemanı </p>
<div id="icKutu">
<p>İçerdeki Div'in içindeki paragraf elemanı</p>
</div>
<p>İkinci paragraf elemanı</p>
<p>Üçüncü paragraf elemanı</p>
</div>
Başka bir kod yazmadan sadece araya > işaretini koyarak tarayıcıya dedik ki, ey tarayıcı sadece doğrudan #kutu divindeki p'leri bold yap eğer p elemanı başka bir şeyin içindeyse ona dokunma. Bu koda göre tarayıcımız #kutu divi içindeki tüm p'leri bold yapacak ama #icKutu divin içinde yazılmış olan p elemanı da #kutu divi içinde olmasına rağmen bold olmayacaktır.
CSS'de '+' sembolü kullanımı
Bu sembol de belirli elemandan sonra gelen ilk belirli elemanı hedeflemek için kullanılır
Örneğin div elemanından sonra gelen ilk p elemanını seç gibi.
<style>
div + p{
color:red
}
</style>
<div id="kutu">
<p>İlk paragraf elemanı </p>
<div id="icKutu">
<p>İçerdeki Div'in içindeki paragraf elemanı</p>
</div>
<p>İkinci paragraf elemanı</p>
</div>
<p>Üçüncü paragraf elemanı</p>
Bu kodlama örneğinde tarayıcıya divlerden sonra gelen ilk p elemanını kırmızı yap şeklinde bir talimat vermiş oluyoruz.
See the Pen
CSS'de '+' sembolü kullanımı by Turgut Arslan (@draguth)
on CodePen.
CSS'de '~' sembolünün kullanımı
Evet geldik en ilginç işarete ~ sembolü belirli bir elemandan sonraki tüm belirli elemanları seçmeye yarar.
Örneğin bir div elemanından sonra gelen tüm p elemanları seç gibi.
<style>
div#icKutu ~ p{
color:blue
}
</style>
<div id="kutu">
<p>İlk paragraf elemanı </p>
<div id="icKutu">
<p>İçerdeki Div'in içindeki paragraf elemanı</p>
</div>
<p>İkinci paragraf elemanı</p>
<p>Üçüncü paragraf elemanı</p>
<div id="icKutu2">
<p>İçerdeki Div'in içindeki paragraf elemanı2</p>
</div>
</div>
<p>Dördüncü paragraf elemanı</p>
Bu kodlama örneğinde tarayıcı #icKutu divinden sonra gelen ve #kutu divi içinde olan tüm p kardeşlerini mavi yapacaktır. Ancak bu seçimin #icKutu2 divindeki p'yi kapsamadığına dikkat edin.
See the Pen
CSS'de '~' sembolünün kullanımı by Turgut Arslan (@draguth)
on CodePen.
Şunu unutmayın:
Tarayıcı için sadece aynı kapsayıcı içindeki elemanlar kardeştir. Daha iç katmanlarda olanlar ya da kapsayıcı eleman dışındakiler kardeş sayılmaz.
Umarım yardımcı olabilmişimdir. Hepinize kolay gelsin.
Kaynak:
https://techbrij.com/css-selector-adjacent-child-sibling
