title: How use CSS3 selector for select h2
body: <p>my code is: </p>
  
  <pre><code>&lt;div id="page" class="clearfix"&gt;
    &lt;div class="span12 row"&gt;
      &lt;div class="row"&gt;
        &lt;div class="span3"&gt;
          &lt;h2 style="background: #aaa"&gt;Text 1&lt;/h2&gt;
        &lt;/div&gt;
        &lt;div class="span4"&gt;
          &lt;h2 style="background: #bbb"&gt;Text 2&lt;/h2&gt;
        &lt;/div&gt;
        &lt;div class="span3"&gt;
          &lt;h2 style="background: #ccc"&gt;Text 3&lt;/h2&gt;
        &lt;/div&gt;
        &lt;div class="span4"&gt;
          &lt;h2 style="background: #ddd"&gt;Text 4&lt;/h2&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I need <strong>background of h2</strong> define using css3 selector. I try following:</p>
  
  <pre><code>.row .span3 h2:nth-of-type(1) {background: #aaa};
  .row .span4 h2:nth-of-type(1) {background: #bbb};
  .row .span3 h2:nth-of-type(2) {background: #ccc};
  .row .span4 h2:nth-of-type(2) {background: #ddd};
  </code></pre>
  
  <p>and this not working.</p>
  
  <p>Can I ask for help? Thanks</p>