Selektorët e Femijëve në CSS

Le të kemi kodin e mëposhtëm:

<p>
	tekst <b><i>bold italic</i></b>
</p>
<p>
	tekst <i>vetëm italic</i>
</p>

Le të themi se duam të zgjedhim të gjitha etiketat i, që janë pasardhës të paragrafëve. Le ta bëjmë këtë:

p i {
	color: red;
}

Rezultati i ekzekutimit të kodit:

Tani le të zgjedhim ato etiketa i, që janë pasardhës të drejtpërdrejtë të paragrafëve tanë. Në këtë do të na ndihmojë selektori i femijëve >.

Për të kuptuar se si ta përdorim atë, le ta krahasojmë atë me selektorin e pasardhësve. Kështu: p i - ne do të zgjedhim të gjitha etiketat italic brenda paragrafëve, ndërsa kështu: p > i - vetëm etiketat italic që janë pasardhës të drejtpërdrejtë të paragrafëve.

Le ta aplikojmë këtë selektor në kodin tonë HTML:

p > i {
	color: red;
}

Rezultati i ekzekutimit të kodit:

Jepet kodi i mëposhtëm:

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

Ngjyrosni në të kuqe vetëm ato etiketa b, që janë pasardhës të drejtpërdrejtë të etiketave li.