CSS Torun Seçiciler (Descendant Selector) Nasıl Kullanılırlar?
CSS torun seçiciler (descendant selector), CSS dilinin güzel avantajlarından birisidir. Torun Seçicilere yapılan tanımlama sadece belirtilen elemanlara uygulanır bu kuralların haricinde kalanlara ise uygulanmaz. Bir örnek verecek olursak bir h1 elemanının em torun elemanına belirli bir stil uygulamak istiyoruz. Normalde bir sınıf tanımlaması yapılarak her h1 elemanı altındaki em elemanını tek tek seçerek bu sınıfı uygulamamız gerekir ki bunun font etiketi uygulamasından farkı yoktur. Açıkçası bu işlemi yapmak uzun zaman alacaktır. Ancak Torun Seçicisi kullanarak bu işi kolayca yapabiliriz.
Örnek bir kod yazarak gösterelim:
h1 em {color: gray}
Bu kod dokümandaki atası h1 olan tüm em torun elemanlarını gri yapacaktır. Diger em‘ler ise bu kuralı uygulamayacaktır. Torun Seçicilerde, seçici kısmı birbirinden bir boşlukla ayrılmış iki veya daha fazla seçiciden oluşur. Aradaki boşluk bağlayıcı özellik taşır. Sadece iki elemanla sınırlı değiliz, sınırsız eleman tanımlayabiliriz.
Örnek bir kod yazarak gösterelim:
ul ol ul em {color: gray}
Torun Seçiciler çok kuvvetli olabilirler. Onlar (X)HTML ile yapılması imkânı olmayan işler yaparlar. Örnek bir dokümanda iki adet alan oluşturduğumuzu düşünün birinci alanın arka alanı (background) mavi, ikinci alanın arka alanının beyaz olduğunu düşünün ve her iki alanın içinde de linkler olduğunu farz edelim. Tüm linkleri mavi olarak atamamız mümkün olmayacaktır çünkü ilk alanın arka alanı mavi olduğu için linkler görünmeyecektir. Çözüm Torun Seçicilerindedir; ilk alan içindeki linklere farklı renk diğerlerine farklı renk tanımlaması yaparak bu işi halledebiliriz.
Örnek bir kod yazarak gösterelim:
td.sidebar {background: blue;}
td.main {background: white;}
td.sidebar a:link {color: white;}
td.main a:link {color: blue;}
Bir örnek daha verelim. blockquote ve p elemanları içindeki b elemanı ile blockquote içinde ve normal paragraf içinde geçen b elemanlarına özel bir atama yapmak istiyoruz.
Örnek bir kod yazarak gösterelim:
blockquote b, p b {color: gray}
Koda dikkat edersek her iki atamayı ayrı ayrı yapmak yerine araya bir virgül koyarak birlikte yaptığımızı görürsünüz.
CSS torun seçiciler (descendant selector) konusunu gördük. CSS ile ilgili konuları aşağıdaki linke tıklayarak CSS kategorisi altındaki başlıklardan öğrenebilirsiniz. Ayrıca aşağıdaki Instagram ve Twitter logolarına tıklayarak bizi Instagram ve Twitter üzerinde de takip edebilirsiniz.
https://yazilimdelisi.com/category/web-gelistirme/css/
Sosyal Medya Hesaplarımız
