CSS Çocuk Seçicisi

Descendant seçici (descendant selector) aynı zamanda içerik seçici olarak da bilinir.

Soy seçiciler, bir elementin soyundan gelen elementleri seçebilir.

Contexte Göre Eleman Seçimi

Soy seçicileri tanımlayarak, bazı kuralların belirli bir belge yapısında çalışmasını ve diğer yapılar için çalışmamasını sağlayabiliriz.

Örneğin, sadece h1 elementindeki em elementlerine stil uygulamak istiyorsanız, aşağıdaki gibi yazabilirsiniz:

h1 em {color:red;}

Bu kural, h1 elementinin soyundan gelen em elementlerinin metnini kırmızıya çevirecektir. Diğer em metinleri (örneğin, paragraflar veya blok alıntılarındaki em) bu kural tarafından seçilmeyecektir:

<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>

Kendi Kendine Deney

Tabii ki, h1 içinde bulunan her em elementine bir class özelliği ekleyebilirsiniz, ancak soy seçicinin verimliliği daha yüksektir.

Gramer Açıklaması

Soy seçicilerde, kuralların solundaki seçici, iki veya daha fazla boşlukla ayrılmış seçiciler içerir. Boşluklar bir birleştirici (combinator) olarak çalışır. Her boşluk birleştiricisi '... ...' içinde bulmak, '... ...' bir parçası olarak, '... ...' soyu olarak ifade edilebilir, ancak seçicileri sağdan sola doğru okumak gerekir.

Bu yüzden, h1 em seçici 'h1 elementinin soyundan herhangi bir em elementi' olarak ifade edilebilir. Seçiciyi soldan sağa doğru okumak isterseniz, aşağıdaki gibi ifade edebilirsiniz: 'em içeren tüm h1'ler aşağıdaki stilleri bu em'e uygulayacak'.

Spesifik Uygulama

Soy seçicinin fonksiyonu son derece güçlüdür. Onunla, HTML'de mümkün olmayan görevleri gerçekleştirmek mümkün olur.

Bir belge varfarz edelim, bu belgede bir kenar çubuğu ve bir ana bölge var. Kenar çubuğunun arka planı mavi, ana bölgenin arka planı beyaz, bu iki bölge de bağlantı listeleri içerir. Tüm bağlantıları mavi olarak ayarlamak mümkün değil, çünkü bu durumda kenar çubuğundaki mavi bağlantılar görülemez hale gelir.

Çözüm, soy seçici kullanmaktır. Bu durumda, kenar çubuğunu içeren div'ye sidebar değerli class özelliği belirtebilir ve ana bölgenin class özelliği değerini maincontent olarak ayarlayabilirsiniz. Ardından aşağıdaki stilleri yazabilirsiniz:

div.sidebar {background:blue;}
div.maincontent {background:white;}
div.sidebar a:link {color:white;}
div.maincontent a:link {color:blue;}

Çocuk seçiciler hakkında göz ardı edilen bir başka yan, iki element arasındaki katman aralığının sınırsız olabilmesi.

Örneğin, ul em yazılırsa, bu dilbilgisi, en derinlikli katman olmasına rağmen, ul elementinden miras alınan tüm em elementlerini seçecektir.

Bu nedenle, ul em, tüm em elementlerini seçecektir:

<ul>
  <li>1. Listeleme Öğesi</li>
    <ol>
      <li>1-1. Listeleme Öğesi</li>
      <li>1-2. Listeleme Öğesi</li>
      <li>1-3. Listeleme Öğesi</li>
        <ol>
          <li>1-3-1. Listeleme Öğesi</li>
          <li> Listeleme Öğesi</li> <em>1-3-2</em></li>
          <li>1-3-3. Listeleme Öğesi</li>
        </ol>
      </li>
      <li>1-4. Listeleme Öğesi</li>
    </ol>
  </li>
  <li>2. Listeleme Öğesi</li>
  <li>3. Listeleme Öğesi</li>
</ul>

Kendi Kendine Deney