Difference between jQuery selectors "ancestor descendant" and "parent > child"

Question

The following two forms of jQuery selectors seem to do the same thing:

• $("div > ul.posts")
• $("div ul.posts")

which is to select all the "ul" elements of class "posts" under "div" elements.

Is there any difference?

Answer 1

Concerning $("div > ul.posts"), only direct descendants of DIVs will be selected.

<div>
    <ul class="posts"> <!--SELECTED-->
        <li>List Item</li>
        <ul class="posts"> <!--NOT SELECTED-->
            <li>Sub list item</li>
        </ul>
    </ul>

    <fieldset>
        <ul class="posts"> <!--NOT SELECTED-->
            <li>List item</li>
        </ul>
    </fieldset>

    <ul class="posts"> <!--SELECTED-->
        <li>List item</li>
    </ul>
</div>

while $("div ul.posts") will select all descendants matching the criteria. So all and any ul.posts will be selected, whatever their nesting level is as long as somewhere along the chain, they are within a div.

Answer 2

The first only selects ul.posts whose parentNode is div.

The second would also select:

<div>
    <blockquote>
        <ul class="posts"></ul>
    </blockquote>
</div>