title: How do I prevent CSS inheritance?
body: <p>I have a hierarchical navigation menu in my sidebar that uses nested lists (&lt;ul&gt; and &lt;li&gt; tags). I am using a pre-made theme that already has styles for list items, but I want to alter the style for the top-level items but NOT have it apply to the sub-items. Is there an easy way to apply styles to the top-level list item tag WITHOUT having those styles cascade down to its children list items? I understand that I can explicitly add overriding styles to the sub-items but I'd really like to avoid having to duplicate all of that style code if there is an easy way to just say "apply these styles to this class and DO NOT cascade them down to any children elements".
  Here is the html I'm using:</p>
  
  <pre><code>&lt;ul id="sidebar"&gt;
    &lt;li class="top-level-nav"&gt;
      &lt;span&gt;HEADING 1&lt;/span&gt;
      &lt;ul&gt;
        &lt;li&gt;sub-heading A&lt;/li&gt;
        &lt;li&gt;sub-heading B&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li class="top-level-nav"&gt;
      &lt;span&gt;HEADING 2&lt;/span&gt;
      &lt;ul&gt;
        &lt;li&gt;sub-heading A&lt;/li&gt;
        &lt;li&gt;sub-heading B&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>So the CSS has styles for <code>#sidebar ul</code> and <code>#sidebar ul li</code> already, but I'd like to add additional styles to <code>#sidebar .top-level-nav</code> that do NOT cascade down to its sub-children.
  Is there any way to do this simply or do I need to rearrange all of the styles so the styles that were on <code>#sidebar ul</code> are now specific to certain classes?</p>