css奇数と偶数セレクタが動作しない

Question

私は半分の星から作られた評価コントロールを作成していますが、.ratingコントロール内の奇数と偶数のラベルを選択できるようにしたいと考えています。セレクタは次のようになりshoudlが、それはここで働いていない、あなたが

.rating { 
    label:nth-child(odd)::before {} // not working 
} 
.rating { 
    label:nth-child(even)::before {} // not working 
} 

のフルCSSながら私のhtmlをチェックアウト私のcodepenです：

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css); 

html, body { 
    margin: 0; 
    height: 100%; 
    min-height: 100%;  
} 

body { 
    background: #272727; 
} 

.rating { 
position: absolute; 
display: inline-block; 
top: 50%; 
left: 50%; 
transform: translate(-50%, -50%); 

label { 
    font-size: 24px; 
    font-family: FontAwesome;  
    color: #afa302; 
} 

label.half_l::before { 
    content: '\f006'; 
    display: inline-block; 
    width: 11px; 
    overflow: hidden;  
} 

label.half_r { 

    width: 12px; 
    position: relative; 
    overflow: hidden; 
    display: inline-block; 
    margin-right: 3px; 
} 
label.half_r::before { 
    content: '\f006'; 
    display: inline-block; 
    left: -11px; 
    position: relative;  
} 

label { 
    float: right; 
} 

label:hover { 
    color: #fff239;  
} 

> input { 
    display: none; 
} 

label.half_l:hover:before, 
label.half_l:hover ~ label.half_l:before { 
    content: '\f089'; 
    color: #fff239; 
} 

label.half_l:hover ~ label.half_r::before { 
    content: '\f005'; 
    color: #fff239; 
} 

label.half_r:hover:before { 
    content: '\f005'; 
    color: #fff239; 
} 

label.half_r:hover ~ label.half_r::before, 
label.half_r:hover ~ label.half_l:before { 
    content: '\f005'; 
    color: #fff239; 
} 

input[type=radio]:checked ~ label.half_l:before, 
input[type=radio]:checked ~ label.half_r:before{ 
    content: '\f005'; 
} 

}

Answer 1

を探し、その種類に関係なく、すべての子供たちを探します4から：要素（2番目のラベル）番目、その後はすべての4までカウント：目とあなたのケースで2からのすべてのでもラベル

nth-child(4n+2)開始となりますルール、適用されます：番目の要素（あなたを最初のラベル）、4：毎に数えてルールを適用します。これはあなたのカスeはすべて奇数ラベルになります。

nth-child(4n+4)の代わりにnth-child(4n)を使用することもできます。これは、0：番目の要素（存在しない）から開始し、4：ごとにカウントされます。

.rating { 
    label:nth-child(4n+4)::before { 
     background: yellow; 
    } 
} 
.rating { 
    label:nth-child(4n+2)::before { 
     background: blue; 
    } 
} 

Updated codepen

Answer 2

利用nth-of-type代わりのnth-child

label:nth-of-type(odd) { 
    background-color:red; 
} 

nth-childそれは彼らのタイプに関係なく

nth-child(4n+4)開始すべての子を数えていないので、あなたはinput年代をバイパスする必要がnth-childセレクターを使用する場合はnth-of-typeは、特定のタイプ