クラスのすべての偶数の子を変数コンテナ内に取得する

Question

現在、次の要素のスタイリングを作成する必要があるが、適切に機能するセレクタを見つけられないような反応アプリケーションをスタイリングします。

.FORM__field--50:nth-of-type(even) { 
 
    \t background-color: red; 
 
    }

<div class='SECTION'> 
 
\t <div class='SECTION__title'>Some title</div> 
 
\t <div class="FORM__field FORM__field--50">Content</div> 
 
\t <div class="FORM__field FORM__field--50">Select this</div> 
 
\t <div class="FORM__field FORM__field--50">Content</div> 
 
\t <div class="FORM__field FORM__field--50">Select this</div> 
 
\t <!-- can go on forever --> 
 
</div> 
 

 
<div class='SECTION'> 
 
\t <div class="FORM__field FORM__field--50">Content</div> 
 
\t <div class="FORM__field FORM__field--50">Select this</div> 
 
\t <!-- can go on forever --> 
 
</div> 
 

 
<div class="SECTION"> 
 
    <div class='SECTION__title'>some subtitle</div> 
 
\t <div class="FORM__field"> 
 
\t \t <div class="FORM__field--50">Content</div> 
 
\t \t <div class="FORM__field--50">Select this</div> 
 
\t \t <div class="FORM__field--50">Content</div> 
 
\t \t <div class="FORM__field--50">Select this</div> 
 
\t \t <div class="FORM__field--50">Content</div> 
 
\t \t <div class="FORM__field--50">Select this</div> 
 
\t \t <!-- can go on forever --> 
 
\t </div> 
 
</div>

がFORM__field--50クラスの間違った（奇数）を選択何らかの理由で最初の場合しかし次のCSSを試してみました。

Answer 1

x:nth-of-type(n)親のn番目の<x>要素であるすべての<x>要素を選択します。したがってタイトルが存在する場合、最初のFORM__field FORM__field--50は2番目の偶数の子になります。 FORM__field FORM__field--50を別のdivの中にラップするだけで、修正することができます。

.FORM__field--50:nth-of-type(even) { 
 
    background-color: red; 
 
}

<div class='SECTION'> 
 
    <div class='SECTION__title'>Some title</div> 
 
    <div class="container"> 
 
    <div class="FORM__field FORM__field--50">Content</div> 
 
    <div class="FORM__field FORM__field--50">Select this</div> 
 
    <div class="FORM__field FORM__field--50">Content</div> 
 
    <div class="FORM__field FORM__field--50">Select this</div> 
 
    </div> 
 
    <!-- can go on forever --> 
 
</div> 
 

 
<div class='SECTION'> 
 
    <div class="container"> 
 
    <div class="FORM__field FORM__field--50">Content</div> 
 
    <div class="FORM__field FORM__field--50">Select this</div> 
 
    </div> 
 
    <!-- can go on forever --> 
 
</div> 
 

 
<div class="SECTION"> 
 
    <div class='SECTION__title'>some subtitle</div> 
 
    <div class="FORM__field"> 
 
    <div class="FORM__field--50">Content</div> 
 
    <div class="FORM__field--50">Select this</div> 
 
    <div class="FORM__field--50">Content</div> 
 
    <div class="FORM__field--50">Select this</div> 
 
    <div class="FORM__field--50">Content</div> 
 
    <div class="FORM__field--50">Select this</div> 
 
    <!-- can go on forever --> 
 
    </div> 
 
</div>

注：あなたの第三のグループはFORM__field div要素を持っているので、それは追加のスタイルを導入しない場合、あなたは、上記のすべてのための同じを使用することができます。

.FORM__field--50:nth-of-type(even) { 
 
    background-color: red; 
 
}

<div class='SECTION'> 
 
    <div class='SECTION__title'>Some title</div> 
 
    <div class="FORM__field"> 
 
    <div class="FORM__field FORM__field--50">Content</div> 
 
    <div class="FORM__field FORM__field--50">Select this</div> 
 
    <div class="FORM__field FORM__field--50">Content</div> 
 
    <div class="FORM__field FORM__field--50">Select this</div> 
 
    </div> 
 
    <!-- can go on forever --> 
 
</div> 
 

 
<div class='SECTION'> 
 
    <div class="FORM__field"> 
 
    <div class="FORM__field FORM__field--50">Content</div> 
 
    <div class="FORM__field FORM__field--50">Select this</div> 
 
    </div> 
 
    <!-- can go on forever --> 
 
</div> 
 

 
<div class="SECTION"> 
 
    <div class='SECTION__title'>some subtitle</div> 
 
    <div class="FORM__field"> 
 
    <div class="FORM__field--50">Content</div> 
 
    <div class="FORM__field--50">Select this</div> 
 
    <div class="FORM__field--50">Content</div> 
 
    <div class="FORM__field--50">Select this</div> 
 
    <div class="FORM__field--50">Content</div> 
 
    <div class="FORM__field--50">Select this</div> 
 
    <!-- can go on forever --> 
 
    </div> 
 
</div>