title: How to disable the effect of a CSS class on a nested element?
body: <p>Is there a way or woukaround to specify a CSS class in a way that it only affects certain nested elements? In the example let's suppose that the <strong>.rich-text</strong> class has some CSS rules. I would want to achieve that it applies to everything inside that div except the <strong>.inner</strong> div and all it's descendants.</p>
  
  <pre><code>&lt;div class="rich-text"&gt;
      &lt;div class="random"&gt;
          &lt;div class="inner"&gt;
              The rich-text class should not effect this or anything in it
          &lt;/div&gt;
          &lt;p&gt;Some text...&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>EDIT: I see that there are some answers that try to give a solution to this exact example code. I would need a general solution that works no matter where the inner class is at (it could be 2 or 20 levels deep and so on...).</p>