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

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

The second would also select:

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

Answer 2

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 3

Oh. So "ancestor descendant" refers to all specified elements under a parent, no matter how deeply nested

While "parent child" refers only to the first specified element even if it occurs again somewhere else under the parent