title: How to apply CSS to only immediate children of a certain class
body: <p>I have a <code>div</code> and in that <code>div</code> I want to create another <code>div</code> with a different class and have the inner <code>div</code> completely separated from the outer <code>div</code> CSS settings.</p>
  
  <p>Like this:</p>
  
  <pre><code>&lt;div class="outer"&gt;
      &lt;div&gt;&lt;h1&gt; h1 &lt;/h1&gt;&lt;div&gt;
      &lt;div class="inner"&gt;
          &lt;h2&gt; h2 &lt;/h2&gt;
      &lt;/div&gt;
      &lt;h2&gt; h2 &lt;/h2&gt;
  &lt;/div&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>.outer h1{ color:blue; }
  .outer h2{ color:red; }
  
  .inner { height: 111px; }
  </code></pre>
  
  <p>What I want is to unset the red color from the <code>h2</code> in the <code>"inner" div</code> </p>
  
  <p>It might seem stupid not to just overweight the color to black here, but what if I have a lot more arguments in the CSS or even if it's dynamic.</p>
  
  <p><strong>Edit:</strong> I guess it isn't clear, but what I need is actually kind of the opposite of the answers I got so far. I have a main-container div and it has alot of settings in the CSS. Now I want to insert a div into the main-container without it having any of the main-container CSS settings.</p>