DIV行の背景色を変更する方法は？ （Jqueryおよび/またはCSS）

Question

私は、既存のHTML出力用にCSSをカスタマイズしています。だから私は出力を変更することはできません、私はスクリプト（Jquery/Javascript）とカスタムCSSを追加することができます。

出力では、アイテムのリストを構成する行が生成されます。 これは、CSS識別子の構造である：

<div> 
    <div class="D F"> 
     <div id=":b" class="G"> 
     <div id=":c" class="G"> 
     <div id=":d" class="G"> 
     <div id=":e" class="G"> 
     <div id=":f" class="G"> 
     <div id=":g" class="G"> 
     <div id=":h" class="G"> 
    </div> 
</div> 

のdivのIDが異なります。いくつかのケースでは、それは私の例に示されている通りであり、他のケースでは:1、:2、:3など、または他の数字/文字の組み合わせです。だから、私はCSSの宣言に頼ることができません。

Iは、（hereから見出され、そして修飾された）効果なしに、次のスクリプトを使用して試みたが：

div.G div:nth-child(even) {background: #CCC;} 
div.G div:nth-child(odd) { background: #FFF;}` 

：

$('.D>div:odd').css("background-color", "#ff0000"); 
$('.D>div:even').css("background-color", "#00ff00"); 

Iはまた、（hereから発見され、修正された）次のCSSを試し

しかし、これはすべてのdiv行を灰色にしました。彼らは交代しなかった。

私はここでフィドルを作成しました：http://jsfiddle.net/inspirednz/qgb9s8cq/4/

を1は私がターゲットとしていたdiv内にネストされている様々な他のdivを含んでいること。何らかの理由で（私にはわかりませんが）宣言した別の色が実際にdiv行（div.V）の1つに影響するため、私はそのフィドルにそれらを残しました。しかし、他のものはありません。

入れ子になっているすべてのdivが取り出された別のフィドルです。この例では、同じCSSはまったく効果がありません。

http://jsfiddle.net/inspirednz/qgb9s8cq/3/

Answer 1

私はあなたが欲しいものを正確に理解した場合は、それらの内側にあなたのdivのないdivをターゲットにしたい：

div.G:nth-child(even) {background: #CCC;} 
div.G:nth-child(odd) { background: #FFF;} 

それはハードウェアがaccelaratedだので、それは常に、JSの上にCSSを使用することが好ましいです。

フィドルhttp://jsfiddle.net/qgb9s8cq/5/

Answer 2

は、これはあなたが探しているものですか？私はCSS3にはあまり慣れていませんが、私はそれを打ちました。私は投稿する前にリフレッシュされている必要があります

http://jsfiddle.net/qgb9s8cq/6/

div.G:nth-child(even) { 
    background: #CCC; 
} 

div.G:nth-child(odd) { 
    background: #FFF; 
} 

ゲス...