Селектор потомака у CSS-у

Претпоставимо да имамо неподређени списак ul и подређени списак 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>

Хајде да обојимо тагове li у овим листама у црвену боју:

li {
	color: red;
}

Претпоставимо сада да желимо да обојимо тагове li неподређене листе ul у црвену боју, а тагове li подређене листе ol у зелену.

У том случају нам може помоћи селектор потомака. Он омогућава да бирамо тагове на основу њиховог родитеља. За то је потребно навести селектор родитеља, а затим размак и селектор потомка. У нашем случају, селектор ul li ће изабрати све тагове li из неподређене листе ul, а селектор ol li ће изабрати све тагове li из подређене листе ol. Хајде да их обојимо у жељене боје:

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

Селектор потомака не мора нужно да се састоји од два селектора тагова – може их бити било колико, написаних кроз размак. У следећем коду, на пример, бирају се сви тагови i који се налазе унутар тага li, који се заузврат налазе унутар тага ul:

ul li i {
	color: red;
}

Дат је следећи код:

<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>
	paragraph text <i>italic</i>
</p>
<p>
	paragraph text <i>italic</i>
</p>

Обојите у црвену боју курзив из тагова ul, а у зелену боју – курзив из тагова p.

Дат је следећи код:

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

Обојите у црвену боју курзив који се налази унутар тага b, који се заузврат налази унутар тага p.