CSS'de Alt Öğe Seçici

Aşağıdaki koda sahip olduğumuzu varsayalım:

html<p>
  metin <b><i>kalın italic</i></b>
</p>
<p>
  metin <i>sadece italic</i>
</p>

Paragrafların torunları olan tüm i etiketlerini seçmek istediğimizi varsayalım. Bunu yapalım:

cssp i {
  color: red;
}

Kodun çalıştırılma sonucu:

Şimdi paragraflarımızın doğrudan alt öğeleri olan i etiketlerini seçelim. Bu konuda bize alt öğe seçici > yardımcı olacaktır.

Nasıl kullanılacağını anlamak için, onu torun seçiciyle karşılaştıralım. Şu şekilde: p i - paragrafların içindeki tüm italicleri seçeriz, ancak şu şekilde: p > i - sadece paragrafların doğrudan alt öğeleri olan italicleri seçer.

Bu seçiciyi HTML kodumuza uygulayalım:

cssp > i {
  color: red;
}

Kodun çalıştırılma sonucu:

html<ul>
  <li>
    <i>italic</i>
    <b>kalın</b>
    <b><i>kalın italic</i></b>
  </li>
  <li>
    <i>italic</i>
    <b>kalın</b>
    <b><i>kalın italic</i></b>
  </li>
</ul>