"body > div" What is this syntax?

Question

I'm looking through some style sheets and I am seeing syntax that I have not seen before:

body > div {

OR

body > div > div {

Is this just another method for descendant selection? If not, then what is this doing?

Answer 1

That is called the direct descendant or child selector. Which is used to select direct children of a parent.

The element>element selector is used to select elements with a specific parent.

To illustrate, check out this example

div#first > p {
  background: yellow;
}

<div id="first">
  <p>This paragraph will be selected</p>
  <div>
    <p>This paragraph will not be selected</p>
  </div>
</div>

On the other hand the descendant selector, selects ALL descendants, not just direct children.

Here is an example.

#first p {
  background: yellow;
}

<div id="first">
  <p>This paragraph will be selected</p>
  <div>
    <p>This paragraph is also a descendant. It will be selected. </p>
  </div>
</div>