jQuery class within class selector

Question

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

how do I find the inner div here?

$container.find('.outer .inner')

is just going to look for a div with class="outer inner", is that correct?

so I tried

$container.find('.outer > .inner')

but that doesn't seem to be working.

Edit:

I know its easy to find with something like

$container.find('.outer').find('.inner')

but I'm looking for the kind of single selector syntax which reads better imho.

Answer 1

For this html:

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

This selector should work:

$('.outer > .inner')

Answer 2

is just going to look for a div with class="outer inner", is that correct?

No, '.outer .inner' will look for all elements with the .inner class that also have an element with the .outer class as an ancestor. '.outer.inner' (no space) would give the results you're thinking of.

'.outer > .inner' will look for immediate children of an element with the .outer class for elements with the .inner class.

Both '.outer .inner' and '.outer > .inner' should work for your example, although the selectors are fundamentally different and you should be wary of this.