Дзіцячы селектар у CSS

Няхай у нас ёсць наступны код:

<p>
	тэкст <b><i>тлусты курсіў</i></b>
</p>
<p>
	тэкст <i>проста курсіў</i>
</p>

Няхай мы хочам выбраць усе тэгі i, якія з'яўляюцца нашчадкамі абзацаў. Зробім гэта:

p i {
	color: red;
}

Вынік выканання кода:

Давайце цяпер выбяром тыя тэгі i, якія з'яўляюцца непасрэднымі нашчадкамі нашых абзацаў. У гэтым нам дапаможа даччыны селектар >.

Каб зразумець, як ім карыстацца, давайце параўнаем яго з селектарам нашчадкаў. Вось так: p i - мы выбярам усе курсівы ўнутры абзацаў, а вось так: p > i - толькі курсівы, якія з'яўляюцца непасрэднымі нашчадкамі абзацаў.

Давайце прымянім гэты селектар да нашага HTML кода:

p > i {
	color: red;
}

Вынік выканання кода:

Дадзены наступны код:

<ul>
	<li>
		<i>курсіў</i>
		<b>тлусты</b>
		<b><i>тлусты курсіў</i></b>
	</li>
	<li>
		<i>курсіў</i>
		<b>тлусты</b>
		<b><i>тлусты курсіў</i></b>
	</li>
</ul>

Афарбуйце ў чырвоны колер толькі тыя тэгі b, якія з'яўляюцца непасрэднымі нашчадкамі тэгаў li.