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.