Child selector in CSS

Let's say we have the following code:

html<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:

cssp 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:

cssp > i {
  color: red;
}

Result of code execution:

html<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>