div内にN番目の型が機能しない

Question

div内にある奇数divのスタイルを変更しようとしています。何らかの理由で、nth-of-type（odd）が別のdiv内にある場合、すべてのdivに影響します。ここでは、通常のdiv要素と奇数のdivの両方のための私のCSSコード..

.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; 
} 

が何らかの理由であり、「N番目-の型は」いつ私のdivの内側に包まれたときに動作しませんが、動作しません彼らはどんな部門でも包まれていません。

が動作しないバージョンのdiv内にラップ：div要素で囲まれていないhttp://jsfiddle.net/EMXYy/

ワーキングバージョン：http://jsfiddle.net/EMXYy/1/

サイドバー注：「ビデオ・エントリー・要約題し のdivクラスを"は、"ポスト240 "のようなIDのdivにあるはずです。この問題を解決するには、これらの部門を削除しないでください。 :)

Answer 1

:nth-of-type()はすべて同じ親のものでなければならないという点で:nth-child()に似ています。 what :nth-of-type() really meansとの混同を防ぐために、すべての兄弟が.postをしている場合

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; 
} 

が、代わりに:nth-child()を使用します：あなたはそれらのラッパーdivのが必要な場合は、代わりにこれらのラッパーに:nth-of-type()を使用

.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; 
}