title: jQuery selector to find the first child in each of a set of elements
body: <p>I have this HTML:</p>
  
  <pre><code>&lt;div id="tags"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;input type="text" /&gt;&lt;a href="#"&gt;First Link&lt;/a&gt; &lt;a href="#"&gt;Second Link&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;input type="text" /&gt;&lt;a href="#"&gt;First Link&lt;/a&gt; &lt;a href="#"&gt;Second Link&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;input type="text" /&gt;&lt;a href="#"&gt;First Link&lt;/a&gt; &lt;a href="#"&gt;Second Link&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;input type="text" /&gt;&lt;a href="#"&gt;First Link&lt;/a&gt; &lt;a href="#"&gt;Second Link&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;input type="text" /&gt;&lt;a href="#"&gt;First Link&lt;/a&gt; &lt;a href="#"&gt;Second Link&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What selector would I use to capture the first anchor of each li element, and how about second anchor of each li without adding any extra ids or classes?</p>
  
  <p>Well, I tried this:</p>
  
  <pre><code>$('#tags a:last-child')
  </code></pre>
  
  <p>And I was able to get the second anchor of each li, but I don't understand why that works. Wouldn't an element need to be inside the anchor to select something yet it is able to select the 2nd anchor of each li. Later on I didn't care how it worked, as long as it worked so I figure I would do the same thing to get the first element which would be:</p>
  
  <pre><code>$('#tags a:first-child')
  </code></pre>
  
  <p>Yet this does not work to get the first anchor of each li. Any ideas?</p>
  
  <p><strong>EDIT:</strong>
  So I guess I was doing it right, but it wasn't working because I had an input text box there which seems to make it not work. Why would it not work anymore once an input box is there?</p>