css - CSS-隣接するセレクターをnth-of-typeと組み合わせて使用​​する

Question

私がやろうとしているのは、見出しタグに続く4つおきのDIVを選択することです。これが私が使用しているコードの基本的な考え方です。

<div class="view-content"> 

   <h3>The Heading</h3> 
   <div></div>  
   <div></div>
   <div></div>
   <div>Trying to select this DIV</div>

   <h3>The Heading</h3> 
   <div></div>  
   <div></div>
   <div></div>

   <h3>The Heading</h3> 
   <div></div>  
   <div></div>
   <div></div>
   <div>Trying to select this DIV</div>  
   <div></div>
   <div></div>
   <div></div>
   <div>Trying to select this DIV</div>

</div><!-- .view-content -->

私はDrupalを使用しているので、コンテンツを配置するためのCSSの記述に限定されています。4つおきのDIVを選択しようとしている理由は、行に4つのDIVがあり、行の4番目（および最後）のDIVから右マージンを削除したいためです。一部の行には1つまたは2つのDIVしかなく、他の行には10以上のDIVがあります。

私が最初に書いたCSS（それは機能していないようです）は次のとおりです。

div.view-content h3 + div:nth-of-type(4n) {
margin-right: 0px;
}

多分私はこれを考えすぎているか、多分それをする方法がありません。いずれにせよ、助けてください！

Answer 1

残念ながら、CSS3 でこれを行うための適切で一般的な方法はないようです。ここに投稿された他の回答からインスピレーションを得て、限られた数の要素でそれをやってのけることができます：

div.view-content h3 + div+div+div+div,
div.view-content h3 + div+div+div+div + div+div+div+div,
div.view-content h3 + div+div+div+div + div+div+div+div + div+div+div+div /*etc*/ {
    margin-right: 0px;
}

http://cssdesk.com/Ty7Gf

Answer 2

h3 + div + div + div + div{background-color:red;}

またはあなたのものと一致する：

div.view-content h3 + div + div + div + div {
   margin-right: 0px;
}