альтернативные фоновые цвета между ярлыками Div

Question

У меня есть таблица, подобная структуре, сделанной из div.

Я хочу чередовать фоновый цвет только divLabels.

Каждое разделение таблицы имеет divlabel и элемент divdata.

это то, что я пытался до сих пор: -

http://jsfiddle.net/o5dv4qkc/

, к сожалению, цвет этикетки не чередуются, а не показывать один и тот же цвет упоминается только для нечетных строк: -

.About_RowLabel:nth-of-type(odd) { 
    background-color: #DEF3CA; 
} 

Может ли кто-нибудь сказать мне, почему это не работает с моими элементами div?

Answer 1

Вы не выбираете должным образом детей: перейти на один уровень их родителей, и начать оттуда, как .someParentClass:nth-of-type(even) .child{}: demo

.About_Row { 
 
    height: 2em; 
 
    width: 500px; 
 
    /*float:left;*/ 
 
} 
 
.About_RowLabel { 
 
    width: 98px; 
 
    color: black; 
 
    float: left; 
 
    background-color: #71cd7b; 
 
} 
 
.About_RowData { 
 
    width: 200px; 
 
    float: left; 
 
    margin-left: 20px; 
 
} 
 
.About_Row:nth-of-type(odd) .About_RowLabel { 
 
    background-color: #DEF3CA; 
 
} 
 
.serv_resize { 
 
    border: 1px solid #E2E2E2; 
 
    color: #444; 
 
    width: 425px; 
 
    float: left; 
 
    margin: 10px 10px 10px 0; 
 
    padding: 5px; 
 
    height: 239px; 
 
}

<div id="you" class="serv_resize"> 
 
    <div class="About_Row"> 
 
    <div class="About_RowLabel"> 
 
     BirthDate: 
 
    </div> 
 
    <div class="About_RowData"> 
 
     <asp:Label ID="lblDoB" runat="server" Text="DoB"></asp:Label> 
 
    </div> 
 
    </div> 
 
    <div class="About_Row"> 
 
    <div class="About_RowLabel"> 
 
     As of: 
 
    </div> 
 
    <div class="About_RowData"> 
 
     <asp:Label ID="lblAsOf" runat="server" Text="Dt"></asp:Label> 
 
    </div> 
 
    </div> 
 
    <div class="About_Row"> 
 
    <div class="About_RowLabel"> 
 
     Phone: 
 
    </div> 
 
    <div class="About_RowData"> 
 
     <asp:Label ID="lblPhone" runat="server" Text="Ph"></asp:Label> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

все nth- псевдо селекторы работы с элементами брата. То есть элементы, которые имеют один и тот же непосредственный родитель.

Все ваши .About_RowLabel являются первыми в своем родителе (элемент .About_Row), поэтому все они нечетные.

Целевые чередующиеся родители

.About_Row:nth-of-type(odd) .About_RowLabel { 
    background-color: #DEF3CA; 
} 

Demo в http://jsfiddle.net/o5dv4qkc/4/