The following selector represents a p element that is a descendant of an li element; the li element must be the child of an ol element; the ol element must be a descendant of a div.

div ol>li p

What is a descendant in the above terminology?

Let's say the example of child is like this

<ol>
    <li>entry</li>
</ol>

Then is this html matches to the above selector?

<div><span>mixtures<span/><div/>
<ol>
    <li>sugar</li>
    <li>milk</li>
</ol>
<p>Stir both mixtures together.</p>

CodePudding user response：

div ol>li p

<div>
  <ol>
    <li>
      <p>sugar</p>
    </li>
    <li>
      <p>milk</p>
    </li>
  </ol>
</div>

Think of your great grandmother (div), your grandmother (ol), your mother (li) and you (p).

Your grandmother, your mother and you are all descendants of your great grandmother ( ).

But only your grandmother is a child of your great grandmother (>). Only your mother is a child of your grandmother (>). And only you are a child of your mother (>).

Back to HTML/CSS terms, all nested elements are descendants of the parent, but only the children are child descendants (>).

The following selector represents a p element that is a descendant of an li element; the li element must be the child of an ol element; the ol element must be a descendant of a div.

div ol>li p

Let's break it down:

The following selector represents a p element that is a descendant of an li element

Yes, the p element is a descendant of the li element. In this case, it is also a child of that particular li element.

the li element must be the child of an ol element

So the selector must use >, because it can only be a child.

the ol element must be a descendant of a div

So it must use the descendant selector ( ), because the child selector (>) would target only the first level of descendants.