title: Target first level <li>s and not the nested <li>s
body: <p>I have the following HTML:</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li&gt;A
      &lt;ul&gt;
        &lt;li&gt;subsection&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;B
      &lt;ul&gt;
        &lt;li&gt;subsection&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;C
      &lt;ul&gt;
        &lt;li&gt;subsection&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>With jQuery, how do I target the FIRST level of <code>&lt;li&gt;</code>s?</p>
  
  <p>For example, I need to make the font bold on hover to the <code>&lt;li&gt;</code>s with the letters A, B and C, but NOT have that font style applied to the nested <code>&lt;li&gt;</code>s (with the name <em>subsections</em>).</p>
  
  <p>Here's an initial jsfiddle <a href="http://jsfiddle.net/aNcsD/" rel="noreferrer"><strong>DEMO</strong></a> if you'd like to use it.</p>
  
  <p>Thanks.</p>
  
  <p><strong>EDIT--</strong></p>
  
  <p><strong>Solution:</strong></p>
  
  <p><strong>CHILD SELECTORS</strong>, that's the answer.</p>
  
  <p>No need for jQuery, this can be done using CSS.</p>
  
  <p>Here's the updated <a href="http://jsfiddle.net/aNcsD/1/" rel="noreferrer"><strong>DEMO</strong></a></p>
  
  <p><strong>EDIT--</strong> Here's a <strong><a href="http://jsfiddle.net/aNcsD/166/" rel="noreferrer">more clear demo</a></strong></p>
  
  <p>Thanks,</p>