title: Limiting scope of JQuery selection with nested, repeating element structure
body: <p>Given a repeating, nested element structure, for example:</p>
  
  <pre><code>&lt;div class="A"&gt;
  
    &lt;span class="B&gt;&lt;/span&gt;
    &lt;span class="B&gt;&lt;/span&gt;
  
    &lt;span class="B"&gt;
       &lt;div class="A"&gt;
          &lt;span class="B"&gt;&lt;/span&gt;
       &lt;/div class="A"&gt;
    &lt;/span&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>How can I select the last <code>&lt;span class="B"&gt;&lt;/span&gt;</code> that is a direct child of the root <code>&lt;div class="A"&gt;&lt;/div&gt;</code> element?</p>
  
  <p>I tired:</p>
  
  <pre><code>div.A &gt; class.B
  </code></pre>
  
  <p>...but (correctly) this also matches the last element which is not a direct child of the root <code>&lt;div class="A"&gt;&lt;/div&gt;</code> element.</p>