Deteći selektor u CSS-u

Neka imamo sledeći kod:

<p>
	tekst <b><i>bold italic</i></b>
</p>
<p>
	tekst <i>just italic</i>
</p>

Neka želimo da izaberemo sve tagove i koji su potomci paragrafa. Učinimo to:

p i {
	color: red;
}

Rezultat izvršavanja koda:

Hajde sada da izaberemo one tagove i koji su neposredni potomci naših paragrafa. U tome će nam pomoći deteći selektor >.

Da bismo razumeli kako da ga koristimo, hajde da ga uporedimo sa selektorom potomaka. Ovako: p i - izabraćemo sva kurzivna slova unutar paragrafa, a ovako: p > i - samo kurzivna slova koja su neposredni potomci paragrafa.

Primenimo ovaj selektor na naš HTML kod:

p > i {
	color: red;
}

Rezultat izvršavanja koda:

Dat je sledeći kod:

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

Obojite u crvenu boju samo one tagove b koji su neposredni potomci tagova li.