Üst düzey CSS seçicileri ve kullanımları

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çicilerBu 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. &lt;style type="text/css"&gt;div &gt; a { font-size: 14px; font-family: Tahoma; color: #FF0000; }div &gt; b { background: #0000ff; color: #ffffff; }div &gt; p { font-family: Verdana; }&lt;/style&gt;&lt;br&gt;CSS Kodlarımıza göre HTML kodlarımızı yazacak olursak;&lt;div&gt;&lt;b&gt;CSS Çocuk seçiciler örneği&lt;/b&gt;&lt;a href="http://burakdemirtas.org"&gt;burakdemirtas.org&lt;/a&gt;&lt;p&gt; &lt;span&gt;bu yazı biçimlendirmeden etkilenmez çünkü çocuk değil :) fakat, p elementinin çocuğu olduğu için, onun özelliklerinden etkilenebilir.&lt;/span&gt;&lt;/p&gt;&lt;/div&gt;Torun SeçicilerYukardaki ö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;&lt;style type="text/css"&gt;body a { font-size: 14px; font-family: Tahoma; color: #FF0000; }html p span { background: #0000ff; color: #ffffff; }div b { font-family: Verdana; }&lt;/style&gt;&lt;br&gt;CSS Kodlarımıza göre HTML kodlarımızı yazacak olursak;&lt;div&gt;&lt;b&gt;CSS Torun seçiciler örneği&lt;/b&gt;&lt;a href="http://burakdemirtas.org"&gt;burakdemirtas.org&lt;/a&gt;&lt;p&gt; &lt;span&gt;bu yazı biçimlendirmeden etkilenmez çünkü çocuk değil :) fakat, p elementinin çocuğu olduğu için, onun özelliklerinden etkilenebilir.&lt;/span&gt;&lt;/p&gt;&lt;/div&gt;&lt;br&gt;Buradaki kodlarımıza göre "body" elementi ikinci düzeyde bulunmuş oluyor (html &gt; body). "a" elementi ise, dördüncü düzeydedir ve "body" elementinin torunudur. Yan Yana Kardeş SeçicilerYapı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.&lt;style type="text/css"&gt;b + a { font-size: 14px; font-family: Tahoma; color: #FF0000; }&lt;/style&gt;&lt;br&gt;CSS Kodlarımıza göre HTML kodlarımızı yazacak olursak;&lt;div&gt;&lt;b&gt;CSS kardeş seçiciler örneği&lt;/b&gt;&lt;a href="http://burakdemirtas.org"&gt;burakdemirtas.org&lt;/a&gt;&lt;/div&gt;&lt;br&gt;Evrensel SeçicilerBelirtilmiş element altındaki tüm diğer elementleri veya tüm elementleri seçmek için kulanılır. * karakteri ile kullanıyoruz.&lt;style type="text/css"&gt;div * { background-color: #ff0000; }&lt;/style&gt;&lt;br&gt;CSS Kodlarımıza göre HTML kodlarımızı yazacak olursak;&lt;div&gt;&lt;b&gt;CSS Evrensel seçiciler örneği&lt;/b&gt;&lt;a href="http://burakdemirtas.org"&gt;burakdemirtas.org&lt;/a&gt;&lt;span&gt;örnek yazı&lt;/span&gt;&lt;p&gt;örnek paragraf&lt;/p&gt;&lt;/div&gt;&lt;br&gt;Böylece "div" elementi altındaki diğer tüm elementlere arkaplan olarak kırmızı özelliği atadık.Özellik SeçicilerElementlerin içinde bulundurduğu alt özelliklere göre elementlere stil verebiliriz. Örneğin, href özelliğinde burakdemirtas.org olan elementini seçebiliriz. &lt;style type="text/css"&gt;a[href="burakdemirtas.org"] { background-color: #000000; color: #ffffff; }&lt;/style&gt;&lt;br&gt;CSS Kodlarımıza göre HTML kodlarımızı yazacak olursak;&lt;a href="http://burakdemirtas.org/"&gt;burakdemirtas.org&lt;/a&gt;&lt;br /&gt;&lt;a href="http://google.com/"&gt;google.com&lt;/a&gt;&lt;br&gt;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 :)