Differences between space and > selector

Question

What is the diffrence betwen selector 6 and 7 from w3

The title says all.

Answer 1

The > is known as the child combinator and it selects children that are direct descendants.

A space between selectors indicates that the second selector must be a child of the first, but does not need to be a direct child (meaning a grandchild would qualify).

This can be seen in the following:

div {
  border: 1px solid black;
  padding: 20px;
}

.outer > .middle {
  background: green; /* Applied */
}

.outer .inner {
  background: red; /* Applied */
}

.outer > .inner {
  background: blue; /* Not applied */
}

<div class="outer">
  <div class="middle">
    <div class="inner">
    </div>
  </div>
</div>