Селектор на потомци во 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.