CSS'de Alt Öğe Seçici

Alt öğe seçici >, öğeleri birbirine doğrudan iç içe geçmiş şekilde seçmeye olanak tanır.

Sözdizimi

seçici1 > seçici2 {
	
}

Örnek

p etiketlerinin hemen içinde bulunan tüm b etiketlerine hitap edelim ve onları kırmızı renge boyayalım:

<p>
	text <b>+</b>
</p>
<p>
	text <i><b>-</b></i>
</p>

p > b {
	color: red;
}

Örnek

.block sınıfına sahip öğelerin hemen içinde bulunan tüm b etiketlerine hitap edelim ve onları kırmızı renge boyayalım:

<p class="block">
	text <b>+</b>
</p>
<p class="block">
	text <i><b>-</b></i>
</p>
<p>
	text <b>-</b>
</p>

.block > b {
	color: red;
}

Örnek

.block sınıfına sahip öğelerin hemen içinde bulunan, .elem sınıfına sahip tüm öğelere hitap edelim ve onları kırmızı renge boyayalım:

<p class="block">
	text <span class="elem">+</span>
</p>
<p class="block">
	text <i><span class="elem">-</span></i>
</p>
<p class="block">
	text <span>-</span>
</p>
<p>
	text <span class="elem">-</span>
</p>

.block > .elem {
	color: red;
}

Ayrıca Bakınız

Bağlamsal Seçici,
bir öğeyi üst öğesine göre seçmeye izin verir
Bitişik Kardeş Seçici,
bir öğeyi komşusuna göre seçmeye izin verir
Genel Kardeş Seçici,
belirli bir öğeden sonra gelen öğeleri seçmeye izin verir
Evrensel Seçici,
tüm öğeleri seçmeye izin verir