CSS-də Uşaq Selektoru

Tutaq ki, bizdə aşağıdakı kod var:

<p>
	mətn <b><i>qalın italic</i></b>
</p>
<p>
	mətn <i>sadəcə italic</i>
</p>

Tutaq ki, biz abzasların nəvələri olan bütün i teqlərini seçmək istəyirik. Bunu edək:

p i {
	color: red;
}

Kodun icrasının nəticəsi:

Gəlin indi bizim abzaların birbaşa nəvələri olan o i teqlərini seçək. Bunda bizə uşaq selektoru > kömək edəcək.

Onun necə istifadə olunacağını başa düşmək üçün gəlin onu nəvə selektorları ilə müqayisə edək. Belə: p i - biz abzaların daxilindəki bütün italicləri seçəcəyik, amma belə: p > i - yalnız abzaların birbaşa nəvələri olan italicləri.

Gəlin bu selektoru bizim HTML kodumuza tətbiq edək:

p > i {
	color: red;
}

Kodun icrasının nəticəsi:

Aşağıdakı kod verilmişdir:

<ul>
	<li>
		<i>italic</i>
		<b>qalın</b>
		<b><i>qalın italic</i></b>
	</li>
	<li>
		<i>italic</i>
		<b>qalın</b>
		<b><i>qalın italic</i></b>
	</li>
</ul>

Yalnız li teqlərinin birbaşa nəvələri olan b teqlərini qırmızı rəngə boyayın.