Daha önceki yazımda, CSS Seçicileri ve kullanımlarını anlatmıştım. Şimdi ise, CSS seçicilerinde üst düzey seçicileri göreceğiz. Üst düzey seçiciler; çocuk, torun, yan kardeş, evrensel ve özellik seçicilerdir. Şimdi sırasıyla bu seçicileri inceleyelim;

Çocuk Seçiciler

Bu seçiciler, herhangi bir elementin içerisinde kullandığımız, alt elementleri kapsar. Örnek verecek olursak; "div" elementini ebeveyn olarak düşünecek olursak, içerisindeki , "b" ve "a" elementleri "div" elementinin çocuğu olacaktır. Burada dikkat edilmesi gereken en önemli nokta; çocuk seçicilerin, ebeveyn elementin bir alt katmanını seçtiğidir. Yani, biraz önce verdiğimiz örneğe göre çocuk seçiciler ile veya elementinin içerisindeki başka elementlere erişemeyiz. 

<style type="text/css">
div > a { font-size: 14px; font-family: Tahoma; color: #FF0000; }
div > b { background: #0000ff; color: #ffffff; }
div > p { font-family: Verdana; }
</style><br>

<div>
<b>CSS Çocuk seçiciler örneği</b>
<a href="http://burakdemirtas.org">burakdemirtas.org</a>
<p>
 <span>bu yazı biçimlendirmeden etkilenmez çünkü çocuk değil :) fakat, p elementinin çocuğu olduğu için, onun özelliklerinden etkilenebilir.</span>
</p>
</div>

Torun Seçiciler

Yukardaki örneğe göre devam edecek olursak, kullandığımız elementin iki düzey altında bulunan elementler, torun elementlerdir. Torun elementleri seçerken boşluk ile seçiyoruz. Örneğimize geçecek olursak;

<style type="text/css">
body a { font-size: 14px; font-family: Tahoma; color: #FF0000; }
html p span { background: #0000ff; color: #ffffff; }
div  b { font-family: Verdana; }
</style><br>

CSS Kodlarımıza göre HTML kodlarımızı yazacak olursak;

<div>
<b>CSS Torun seçiciler örneği</b>
<a href="http://burakdemirtas.org">burakdemirtas.org</a>
<p>
 <span>bu yazı biçimlendirmeden etkilenmez çünkü çocuk değil :) fakat, p elementinin çocuğu olduğu için, onun özelliklerinden etkilenebilir.</span>
</p>
</div><br>

Buradaki kodlarımıza göre "body" elementi ikinci düzeyde bulunmuş oluyor (html > body). "a" elementi ise, dördüncü düzeydedir ve "body" elementinin torunudur. 

Yan Yana Kardeş Seçiciler

Yapılan kodlamaya göre aynı düzeyde ve yan yana  bulunan elementlerden, ikinci elementi seçer. Elementlerin yan yana olma durumlarını + karakteri ile belirliyoruz.

<style type="text/css">
b + a { font-size: 14px; font-family: Tahoma; color: #FF0000; }
</style><br>

CSS Kodlarımıza göre HTML kodlarımızı yazacak olursak;

<div>
<b>CSS kardeş seçiciler örneği</b>
<a href="http://burakdemirtas.org">burakdemirtas.org</a>
</div><br>

Evrensel Seçiciler

Belirtilmiş element altındaki tüm diğer elementleri veya tüm elementleri seçmek için kulanılır. * karakteri ile kullanıyoruz.

<style type="text/css">
div * { background-color: #ff0000; }
</style><br>

CSS Kodlarımıza göre HTML kodlarımızı yazacak olursak;

<div>
<b>CSS Evrensel seçiciler örneği</b>
<a href="http://burakdemirtas.org">burakdemirtas.org</a>
<span>örnek yazı</span>
<p>örnek paragraf</p>
</div><br>

Böylece "div" elementi altındaki diğer tüm elementlere arkaplan olarak kırmızı özelliği atadık.

Özellik Seçiciler

Elementlerin içinde bulundurduğu alt özelliklere göre elementlere stil verebiliriz. Örneğin, href özelliğinde burakdemirtas.org olan elementini seçebiliriz. 

<style type="text/css">
a[href="burakdemirtas.org"] { background-color: #000000; color: #ffffff; }
</style><br>

<a href="http://burakdemirtas.org/">burakdemirtas.org</a><br />
<a href="http://google.com/">google.com</a><br>

Buradaki örneğimize göre, linki burakdemirtas.org olan "a" elementinin arkaplanı siyah ve yazı rengi beyaz olacaktır. "a" etiketi için bazı özellik seçicilere aşağıdan ulaşabilirsiniz.

a[href] = href özelliği olan linkleri seçer. 
a[href="burakdemirtas.org"] = href özelliğinde burakdemirtas.org olan linkleri seçer. 
a[href^="www"] = href özelliği www ile başlayan linkleri seçer. 
a[href$="org"] = href özelliği org ile biten linkleri seçer. 
a[href!="burakdemirtas.org"] = href özelliği burakdemirtas.org olmayan linkleri seçer. 
a[href*="burakdemirtas"] = href özelliği içerisinde burakdemirtas bulunan linkleri seçer.

Yazımız bu kadar. Umarım faydalı olmuştur. Bir sonraki yazıda görüşmek üzere, sağlıcakla kalın :)