In the first snippet, the selector .outer > .inner matches because the inner element is a direct child of the outer element. In the second, the selector .outer > .inner does not match, because the inner is the hello's child, not the outer's. Instead, .outer > .hello > .inner would match, because hello is outer's child, and inner is hello's child.

Now, if you used .outer .inner, it would not be a problem in either case, because instead of trying to match direct children, all you care is that it's a descendant. That includes child like the first snippet, grandchild like the second snippet, great-grandchild, and so on. Or, in other words, .outer .inner would even match the <input> in this: