title: How to use nth-of-type to select nested children
body: <p>I am trying to style odd and even headers that are associated with content.  They are inside several DIVs, and I am unable to get nth-child or nth-of-type to work- only the odd styles are displaying.  Here is some concept code: </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="content"&gt;
  &lt;h2&gt;Welcome to my blog&lt;/h2&gt;
  &lt;div class="post"&gt;
      &lt;h2&gt;&lt;a href="myPostLink"&gt;This is a post&lt;/a&gt;&lt;/h2&gt;
      &lt;div class="entry"&gt;
          &lt;p&gt;here is some content&lt;/p&gt;
      &lt;/div&gt; &lt;!-- end entry --&gt;
      &lt;div class="meta"&gt;&lt;p&gt;Here is meta info&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt; &lt;!-- end post --&gt;
  
  &lt;div class="post"&gt;
      &lt;h2&gt;&lt;a href="myPostLink"&gt;This is another post&lt;/a&gt;&lt;/h2&gt;
      &lt;div class="entry"&gt;
          &lt;p&gt;here is some more content&lt;/p&gt;
      &lt;/div&gt; &lt;!-- end entry --&gt;
      &lt;div class="meta"&gt;&lt;p&gt;Here is meta info&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt; &lt;!-- end post --&gt;
  &lt;/div&gt; &lt;!-- end content --&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.content h2 a:nth-of-type(odd){color: #444;}
  .content h2 a:nth-of-type(even){color: #ccc;}
  </code></pre>
  
  <p><a href="http://jsfiddle.net/272rq/" rel="noreferrer">JSFiddle</a></p>
  
  <p>My thought process was that since I was starting at <strong>.content</strong> in my CSS, the first <strong>.content h2 a</strong> would be considered odd and the second even, etc.  Apparently not so- they are all considered the first child. Is there a way to select the headers in the way I want with CSS alone?  Am I doing something dumb? </p>