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>
CSS Kodlarımıza göre HTML kodlarımızı yazacak olursak;<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>CSS Kodlarımıza göre HTML kodlarımızı yazacak olursak;<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 :)