title: Preventing CSS Inheritance on a Dynamic loading DIV
body: <p>I have an unordered list and each of the item in the ul has a div with it. This div loads a html page using jQuery. The style I've given for the ul is getting applied for the whole html which loads in the div. How to prevent that from happening . I want the style for the div to be applied only to itself and not to any of the descendants. </p>
  
  <p>I can try to add specific styles to the descendants but there are too many tags inside. </p>
  
  <pre><code>&lt;ul class="expr"&gt;
  &lt;li&gt;&lt;a class="textlink trig" href ="javascript:void"&gt;Using the z-index property of CSS&lt;/a&gt;
  &lt;div class="holder"&gt;&lt;/div&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a class="textlink" href ="javascript:void"&gt;Swapping Images on Mouse Hover&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Css: </p>
  
  <pre><code>    ul.expr
  {
      font-size: 125%;
      font-weight: bold;
      list-style: none;
      margin: 0.5em 0;
      padding: 100px 20px;
      color: #1e1a19;
  
  }
  </code></pre>
  
  <p>HTML after page load:</p>
  
  <pre><code>&lt;ul class="expr"&gt;
  &lt;li&gt;
  &lt;a class="textlink trig" href="javascript:void"&gt;Using the z-index property of CSS&lt;/a&gt;
  &lt;div class="holder" style="display: block;"&gt;
    &lt;title&gt; Image Hover Swap experiment &lt;/title&gt;
    &lt;h4&gt; Experiment 2. Swapping Images on Mouse Hover &lt;/h4&gt;
  Lot of text
  &lt;br&gt;
  More Text
  &lt;br&gt;
  Extra Text
  &lt;/div&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>Here ul has the styles from the "expr" class. The div "holder" loads dynamic content. I dont want any of the "expr"s styles to be added to the div inside. But i want them to be applied to the the other "li" list items and subsequently not the divs inside other list items too. </p>