Podrejeni izbirnik v CSS

Recimo, da imamo naslednjo kodo:

<p>
	besedilo <b><i>krepko ležeče</i></b>
</p>
<p>
	besedilo <i>samo ležeče</i>
</p>

Recimo, da želimo izbrati vse oznake i, ki so potomci odstavkov. Naredimo to:

p i {
	color: red;
}

Rezultat izvajanja kode:

Zdaj pa izberimo tiste oznake i, ki so neposredni potomci naših odstavkov. Pri tem nam bo pomagal podrejeni izbirnik >.

Da bi razumeli, kako ga uporabljati, primerjajmo ga z izbirnikom potomcev. Takole: p i - izbrali bomo vse ležeče znotraj odstavkov, takole pa: p > i - samo ležeče, ki so neposredni potomci odstavkov.

Uporabimo ta izbirnik na naši HTML kodi:

p > i {
	color: red;
}

Rezultat izvajanja kode:

Podana je naslednja koda:

<ul>
	<li>
		<i>ležeče</i>
		<b>krepko</b>
		<b><i>krepko ležeče</i></b>
	</li>
	<li>
		<i>ležeče</i>
		<b>krepko</b>
		<b><i>krepko ležeče</i></b>
	</li>
</ul>

Obarvajte rdeče le tiste oznake b, ki so neposredni potomci oznak li.