CSS'de Alt Öğe Seçiciler

Bir ul listemiz ve bir ol listemiz olsun:

<ul>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>
<ol>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ol>

Bu listelerdeki li etiketlerini kırmızı renge boyayalım:

li {
	color: red;
}

Şimdi ul listesindeki li etiketlerini kırmızı, ol listesindeki li etiketlerini ise yeşile boyamak istediğimizi varsayalım.

Bu durumda bize alt öğe seçicisi yardımcı olacaktır. Bu seçici, etiketleri ebeveynlerine göre seçmemizi sağlar. Bunun için ebeveynin seçicisini, ardından bir boşluk ve alt öğenin seçicisini belirtmek gerekir. Bizim durumumuzda ul li seçicisi ul listesindeki tüm li etiketlerini seçer, ol li seçicisi ise ol listesindeki tüm li etiketlerini seçer. Onları istenilen renklere boyayalım:

ul li {
	color: red;
}
ol li {
	color: green;
}

Alt öğe seçicisinin mutlaka iki etiket seçicisinden oluşması gerekmez - aralarında boşluk olacak şekilde istediğiniz sayıda seçici yazabilirsiniz. Örneğin aşağıdaki kodda, ul etiketinin içinde bulunan li etiketlerinin içindeki tüm i etiketleri seçilmektedir:

ul li i {
	color: red;
}

Aşağıdaki kod verilmiştir:

<ul>
	<li>text <i>italic</i></li>
	<li>text <i>italic</i></li>
	<li>text <i>italic</i></li>
	<li>text <i>italic</i></li>
</ul>

<p>
	paragraph text <i>italic</i>
</p>
<p>
	paragraph text <i>italic</i>
</p>

ul etiketlerindeki italik metni kırmızı, p etiketlerindeki italik metni ise yeşil renge boyayın.

Aşağıdaki kod verilmiştir:

<p>
	paragraph text <b><i>bold italic</i></b>
</p>
<p>
	paragraph text <i>italic</i>
</p>

p etiketinin içinde bulunan ve sırayla b etiketinin içindeki italik metni kırmızı renge boyayın.