title: Stop inheritance of a specific CSS class
body: <p>I have to modify an existing HTML5 app that has two different types of themes.</p>
  
  <p>For example, I have something like this:</p>
  
  <pre><code>&lt;body class="theme1 theme2"&gt;
      &lt;div id="div1"&gt;I'm happy with both themes&lt;/div&gt;
      &lt;div id="div2"&gt;I just want theme 2&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>This example is overly simplified. I know that I could just apply theme2 to div2. But the point is that those themes classes are in the body and I cannot "easily" change that.</p>
  
  <p>I naively thought that I could just do something like this in JS:</p>
  
  <pre><code>getElementById('div2').classList.remove('theme1');
  </code></pre>
  
  <p>But this does not seem to work. I think that this only work on classes directly applied to the element. I would prefer a "pure CSS" solution anyway.</p>
  
  <p>The info that I find seems related to preventing inheritance of specific properties. In my case, I want to prevent inheritance of any property under the theme1 class for div2 and all its children.</p>