title: CSS to prevent child element from inheriting parent styles
body: <blockquote>
  <p><strong>Possible Duplicate:</strong><br />
  <a href="https://stackoverflow.com/questions/958170/how-do-i-prevent-css-inheritance">How do I prevent CSS inheritance?</a></p>
  </blockquote>
  
  <p>Is there a way to declare the CSS property of an element such that it will not affect any of its children or is there a way to declare CSS of an element to implement just the style specified and not inherit any of the style declared for its parents?</p>
  <p>A quick example</p>
  <p>HTML:</p>
  <pre><code>&lt;body&gt;
   &lt;div id=&quot;container&quot;&gt;
    &lt;form&gt;
     &lt;div class=&quot;sub&quot;&gt;Content of the paragraph
      &lt;div class='content'&gt;Content of the span&lt;/div&gt;
     &lt;/div&gt;
    &lt;/form&gt;
   &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  <p>CSS:</p>
  <pre class="lang-css prettyprint-override"><code>form div {font-size: 12px; font-weight: bold;}
  div.content
  {
   /* Can anything go here? */
  }
  </code></pre>
  <p>Under normal circumstances one would expect the text block &quot;Content of the paragraph&quot; and &quot;Content of the span&quot; will both be 12px and bold.</p>
  <p>Is there a property to include in the CSS above in the &quot;div.content&quot; block that will prevent it from inheriting the declaration in the &quot;#container form div&quot; block to limit the style to just &quot;content of the paragraph&quot; and spare &quot;Content of the span&quot; including any other children div?</p>
  <p>If you are wondering why, well, I created a particular CSS file that gives all the forms on my project a particular feel and the <code>div</code> elements under the form all inherit the feel. No problem. But inside the form I want to use Flexigrid but flexigrid inherits the style and it just looks useless. If I use flexigrid outside the form and such it won't inherit the forms css, then it looks great. Otherwise it just looks terrible.</p>