How to use nth-of-type to select nested children

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:

HTML:

<div class="content">
  <h2>Welcome to my blog</h2>
  <div class="post">
  <h2><a href="myPostLink">This is a post</a></h2>
  <div class="entry">
    <p>here is some content</p>
  </div> <!-- end entry -->
  <div class="meta"><p>Here is meta info</p></div>
</div> <!-- end post -->
<div class="post">
  <h2><a href="myPostLink">This is another post</a></h2>
  <div class="entry">
    <p>here is some more content</p>
  </div> <!-- end entry -->
  <div class="meta"><p>Here is meta info</p></div>
  </div> <!-- end post -->
</div> <!-- end content -->

CSS:

.content h2 a:nth-of-type(odd){color: #444;}
.content h2 a:nth-of-type(even){color: #ccc;}

jsfiddle

My thought process was that since I was starting at .content in my CSS, the first .content h2 a 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?


solution

Use nth-child on the .post elements, and then select the h2 element from there

jsFiddle example

.post:nth-child(odd) h2 a {
  color: red;
}
.post:nth-child(even) h2 a {
  color: green;
}