title: What is the new proper way to use a child selector with a context node in jQuery?
body: <p>In the <a href="http://api.jquery.com/child-selector/" rel="nofollow noreferrer">jQuery documentation for the child selector</a> I saw this note:</p>
  
  <blockquote>
    <p>Note: The <code>$("&gt; elem", context)</code> selector will be deprecated in a future release. Its usage is thus discouraged in lieu of using alternative selectors.</p>
  </blockquote>
  
  <p>I use this pattern all the time, usually like this:</p>
  
  <pre><code>$nodes.find('&gt; children[something=morecomplicated] &gt; somethingelse');
  </code></pre>
  
  <p>However, I don't understand what the "alternative selectors" they refer to could be. <strong>What is the right way to write a selector which traverses the immediate children of a context node?</strong>  As a bonus, can anyone explain <em>why</em> this is depreciated? All the alternatives everyone is giving seem amazingly <em>ugly</em>.</p>
  
  <p>Here are some things that <em>don't</em> work:</p>
  
  <pre><code>// does not guarantee that '.child' is an immediate child
  $nodes.find('.child &gt; .grandchild');
  
  // this will return empty array in recent jQuery
  // and will return full list of children in older jQuery
  $nodes.children('.child &gt; .grandchild');
  
  // Anything like this which forces you to split up the selector.
  // This is ugly and inconsistent with usual selector ease-of-use,
  // and is a non-trivial conversion for long or complex selectors.
  $nodes.children('.child').children('.grandchild');
  // After all, no one would ever recommend
  $nodes.find('.this').children('.that');
  // instead of
  $nodes.find('.this &gt; .that');
  </code></pre>