title: How do I Have Different Header Rules For Elements In CSS Class
body: <p>Okay so this is kind of hard to explain; therefore, it is also hard to search for, so I am just going to ask here.</p>
  
  <p>Basically I have a CSS class that I am applying to certain DIVs. Within each class I would like to have rules that apply to certain selectors only in that DIV</p>
  
  <p>For example let's say I have a CSS class like this</p>
  
  <pre><code>  .main_wrapper {
          text-align: center;
  
          h1
      {
          color: blue;
      }
  
      }
  
      .question_wrapper  {
          text-align: left;
  
          h1
      {
          color: red;
      }
      }
  </code></pre>
  
  <p>And then let's say I had HTML like this</p>
  
  <pre><code>&lt;div class="main_wrapper"&gt;
  
      &lt;h1&gt;Test 1&lt;/h1&gt;
  
      &lt;div class="question_wrapper"&gt;
  
          &lt;h1&gt;Test 2&lt;/h1&gt;
  
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>What I would like to accomplish with CSS is have the h1 tag in the main_wrapper div be blue and the h1 tag in question_wrapper be red.</p>
  
  <p>I know that the CSS I have here doesn't work but that is essentially what I am trying to accomplish. </p>
  
  <p>I hope this makes sense.</p>
  
  <p>If anybody has any ideas that would be great.</p>