Nth-of-Type non funziona quando Inside Div

Question

Sto provando a cambiare lo stile dei div dispari che si trovano all'interno di un div. Per qualche motivo l'ennesimo tipo (dispari) sta interessando tutte le mie div quando è all'interno di un altro div. Ecco il mio codice CSS sia per il div div regolare e le dispari ..

.video-entry-summary { 
    width:214px; 
    height:210px; 
    margin-left:10px; 
    float:left; 
    position:relative; 
    overflow:hidden; 
    border:1px solid black; 
} 

.video-entry-summary:nth-of-type(odd) { 
    width:214px; 
    height:210px; 
    margin-left:0px; 
    float:left; 
    position:relative; 
    overflow:hidden; 
    border:1px solid black; 
    background:#ccc; 
} 

Per qualche ragione, il "Nth-di-Type" non funziona quando avvolto all'interno dei miei div, ma funziona quando non sono avvolti in alcun div.

Non Versione di lavoro quando avvolto all'interno div:http://jsfiddle.net/EMXYy/

Versione di lavoro quando non è avvolto all'interno div:http://jsfiddle.net/EMXYy/1/

Sidebar Nota: Le classi div dal titolo "Video-entry-sintesi "dovrebbero essere nei div con id come" post-240 ". Se si tenta di risolvere questo problema, si prega di non rimuovere questi div. :)

Answer 1

:nth-of-type() è simile a :nth-child() in quanto devono essere tutti dello stesso genitore. Se avete bisogno di quei involucro div s, utilizzare :nth-of-type() su quegli involucri invece:

div.post:nth-of-type(odd) .video-entry-summary { 
    width:214px; 
    height:210px; 
    margin-left:0px; 
    float:left; 
    position:relative; 
    overflow:hidden; 
    border:1px solid black; 
    background:#ccc; 
} 

Se tutti i fratelli sono .post, utilizzare :nth-child() invece per evitare confusione con what :nth-of-type() really means:

.post:nth-child(odd) .video-entry-summary { 
    width:214px; 
    height:210px; 
    margin-left:0px; 
    float:left; 
    position:relative; 
    overflow:hidden; 
    border:1px solid black; 
    background:#ccc; 
}