CSS'de Alt Öğe Seçici

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

<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:

p 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:

p > i {
	color: red;
}

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

Aşağıdaki kod verilmiştir:

<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>

Sadece li etiketlerinin doğrudan alt öğeleri olan b etiketlerini kırmızı renge boyayın.