Kichaguzi cha Mtoto katika CSS

Acha tuwe na msimbo ufuatao:

<p>
	maandishi <b><i>bold italic</i></b>
</p>
<p>
	maandishi <i>italic tu</i>
</p>

Acha tutake kuchagua vitambulisho vyote i, ambavyo ni vizazi vya aya. Wacha tufanye hivi:

p i {
	color: red;
}

Matokeo ya utekelezaji wa msimbo:

Sasa tuchague vitambulisho i, ambavyo ni vizazi vya moja kwa moja vya aya zetu. Hii itasaidiwa na kichaguzi cha mtoto >.

Ili kuelewa jinsi ya kutumia, hebu tulinganishe na kichaguzi cha vizazi. Hivi: p i - tutachagua herufi italic zote ndani ya aya, na hivi: p > i - tu herufi italic, ambazo ni vizazi vya moja kwa moja vya aya.

Wacha tutumie kichaguzi hiki kwenye msimbo wetu wa HTML:

p > i {
	color: red;
}

Matokeo ya utekelezaji wa msimbo:

Msimbo ufuatao umetolewa:

<ul>
	<li>
		<i>italic</i>
		<b>bold</b>
		<b><i>bold italic</i></b>
	</li>
	<li>
		<i>italic</i>
		<b>bold</b>
		<b><i>bold italic</i></b>
	</li>
</ul>

Rangi nyekundu tu vitambulisho b, ambavyo ni vizazi vya moja kwa moja ya vitambulisho li.