Selectorul de descendenți în CSS

Să presupunem că avem o listă ul și o listă ol:

<ul>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>
<ol>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ol>

Haideți să colorăm tagurile li din aceste liste în culoarea roșie:

li {
	color: red;
}

Să presupunem acum că vrem să colorăm tagurile li listei ul în roșu, iar tagurile li listei ol - în verde.

În acest caz, ne va ajuta selectorul de descendenți. Acesta permite selectarea tagurilor în funcție de părintele lor. Pentru aceasta, trebuie să specificați selectorul părintelui, iar după spațiu - selectorul descendentului. În cazul nostru selectorul ul li va selecta toate tagurile li din lista ul, iar selectorul ol li - va selecta toate tagurile li din lista ol. Să le colorăm în culorile necesare:

ul li {
	color: red;
}
ol li {
	color: green;
}

Selectorul de descendenți nu trebuie neapărat să fie format din doi selectorii de tag-uri - pot fi orice număr de ei, scriși prin spațiu. În următorul cod, de exemplu, sunt selectate toate tagurile i, care se află în interiorul tagului li, care la rândul lor se află în interiorul tagului ul:

ul li i {
	color: red;
}

Este dat următorul cod:

<ul>
	<li>text <i>italic</i></li>
	<li>text <i>italic</i></li>
	<li>text <i>italic</i></li>
	<li>text <i>italic</i></li>
</ul>

<p>
	paragraf text <i>italic</i>
</p>
<p>
	paragraf text <i>italic</i>
</p>

Colorați în roșu italic-ul din tagurile ul, iar în verde - italic-ul din tagurile p.

Este dat următorul cod:

<p>
	paragraf text <b><i>bold italic</i></b>
</p>
<p>
	paragraf text <i>italic</i>
</p>

Colorați în roșu italic-ul, care se află în interiorul tagului b, care la rândul său se află în interiorul tagului p.