Come utilizzare nth-of-type per selezionare i bambini nidificati

Question

Sto provando a definire intestazioni pari e dispari associate al contenuto. Si trovano all'interno di diversi DIV e non riesco a far funzionare l'ennesimo o l'ennesimo tipo, solo gli stili dispari vengono visualizzati. Ecco il codice concetto:

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

mio processo di pensiero è che da quando ho stava iniziando a .content nel mio CSS , il primo .content h2 a sarebbe considerato strano e il secondo ev it, ecc. Apparentemente no, sono tutti considerati il ​​primo figlio. C'è un modo per selezionare le intestazioni nel modo in cui voglio con il solo CSS? Sto facendo qualcosa di stupido?

Grazie,

Ricky

Answer 1

Usa nth-child sulle .post elementi, e quindi selezionare l'elemento h2 da lì

jsFiddle example

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

Answer 2

Prova questo

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

Un elemento di div pari e dispari con post class. Non sono sicuro che sia quello di cui hai bisogno. Un esempio: http://jsfiddle.net/a4j7z/