What is the difference between > and space in css selector

Question

I've seen two example,

.someclass > .inner{...}

and

.someclass .inner{...}

works the same way. Is there are any difference between them which i'm not seeing?

Answer 1

The first applies only to immediate children. The second, to any descendant.

So given this CSS:

.someclass > .inner { color: red }
.someclass .inner { font-weight: bold }

the following applies:

<div class="someclass">
  <div class="inner">
     Bold and red
  </div>

  <div> 
    <div class="inner">
      Just bold.
    </div>
  </div>
</div>

.someclass>.inner {
  color: red
}

.someclass .inner {
  font-weight: bold
}

<div class="someclass">
  <div class="inner">
    Bold and red
  </div>

  <div>
    <div class="inner">
      Just bold.
    </div>
  </div>
</div>

Answer 2

.someclass > .inner{...} - only apply to ".inner" that are direct children to ".someclass".

.someclass .inner{...} - applies to any ".inner" that are inside ".someclass", even if there are elements between them.