Child selector in CSS

Let's say we have the following code:

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

Let's say we want to select all i tags that are descendants of paragraphs. Let's do this:

p i {
	color: red;
}

Result of code execution:

Let's now select those i tags that are immediate descendants of our paragraphs. The child selector > will help us with this.

To understand how to use it, let's compare it to the descendant selector. Like this: p i - we'll select all italics inside paragraphs, and like this: p > i - only italics that are immediate descendants of paragraphs.

Let's apply this selector to our HTML code:

p > i {
	color: red;
}

Result of code execution:

The following code is given:

<ul>
	<li>
		<i>italic</i>
		<b>bold</b>
		<b><i>bold italic</i></b>
	</li>
	<li>
		<i>italic</i>
		<b>bold</b>
		<b><i>bold italic</i></b>
	</li>
</ul>

Color only those b tags that are immediate descendants of li tags red.