Селектар нашчадкаў у 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.