CSS TORUN SEÇİCİLER (Descendant Selectors)

Diğer adı ile iç içe seçicilerdir. Torun seçicilere yapılan tanımlama sadece belirtilen HTML etiketlere uygulanır. Örneğin tüm p Etiketi altındaki em Etiketinin yazı rengini mavi yapmak istiyoruz. Normalde bu işlem için her em Etiketi için font tanımlaması yapmak gerekir. Ancak torun seçiciler sayesinde bu işi kolayca yapabiliriz.

p em {color:blue}
 

Bu tanımlama p elemanı altında bulunan tüm em elemanlarının yazı rengini mavi yapacaktır. Diğer em elemanları ise bu kuralı uygulamayacaktır.

Torun seçiciler de seçici kısmı birbirinden boşluk karakteri ile ayrılmış bir ya da daha fazla seçiciden oluşur.

Sadece iki elementle sınırlı değiliz, sınırsız element tanımlayabiliriz.

ul li ul li{color:blue;}
 

HTML sayfamızda şöyle olsun.

<ul>
    <li>1. liste</li>
    <li>2. liste
       <ul>
        <li>2-1.liste</li>
      <li>2-2.liste</li>
      <li>2-3.liste</li>
       </ul>
   </li>
   <li>3. liste</li>
</ul>

ÇIKTI:

Bu kural ul etiketin altındaki li elemanının altında bulunan ul etiketini altındaki li elemanını seçer.

Torun seçicilerin kullanımı oldukça yararlıdır.

Örneğin sayfamızda iki adet artalan kullandığımızı düşünelim. Birincisini mavi diğer kısmı beyaz yapsak. İki alan içinde de yazılarımız var. Yazı rengimizi mavi belirtsek mavi artalanda yazılarımız gözükmez.Bu durumda torun seçiciler işimizi kolaylaştırır. Mavi artalan üzerindeki yazıların torun seçici ile beyaz yaparız.