2番目と3番目と4番目の要素の背景色を変更しますか？

Question

2番目と3番目と4番目ごとに背景色を変更しようとしています。

だから、基本的に、私は彼らがする必要があるためには、次のとおりです。

グリーン、レッド、ブルー、ブラック。

これは私のフィドル

https://jsfiddle.net/7qkd8jwe/1/

であり、これは私のCSSコードです：

.item:nth-child(2n+1) { 
background-color:red; 
} 
.item:nth-child(3n+2) { 
background-color:blue; 
} 
.item:nth-child(4n+4) { 
background-color:black; 
} 
.item{ 
    width:100%; 
    height:100px; 
    background-color:green; 
    margin-bottom:10px; 
} 

誰かがこの問題について助言してもらえますか？

ご協力いただければ幸いです。

これは、オッズについてのものではなく、他の質問でも推奨されています。

Answer 1

これはトリックを行う必要があります。

https://jsfiddle.net/7qkd8jwe/3/

.item:nth-child(4n-7) { 
    background-color:green; 
} 

.item:nth-child(4n-6) { 
    background-color:red; 
} 

.item:nth-child(4n-5) { 
    background-color:blue; 
} 

.item:nth-child(4n-4) { 
    background-color:black; 
} 

.item { 
    width:100%; 
    height:100px; 
    margin-bottom:10px; 
} 

Answer 2

@ambsは私が間違って証明したが、私はとにかく代替として、ここではこれを残しておきます。

---

あなたが試した方法でnth-childを使用することはできません。

ただし、隣接兄弟セレクタでn番目の子を組み合わせることができます

.item { 
 
    width: 100%; 
 
    height: 100px; 
 
    background-color: green; 
 
    margin-bottom: 10px; 
 
} 
 

 
.item:nth-child(4n+1) { 
 
    background-color: green; 
 
} 
 

 
.item:nth-child(4n+1) + .item { 
 
    background-color: red; 
 
} 
 

 
.item:nth-child(4n+1) + .item + .item { 
 
    background-color: blue; 
 
} 
 

 
.item:nth-child(4n+1) + .item + .item + .item { 
 
    background-color: black; 
 
}

<div class="item"> 
 
</div> 
 

 
<div class="item"> 
 
</div> 
 

 

 
<div class="item"> 
 
</div> 
 

 

 
<div class="item"> 
 
</div> 
 

 

 
<div class="item"> 
 
</div> 
 

 

 
<div class="item"> 
 
</div> 
 

 
<div class="item"> 
 
</div> 
 

 
<div class="item"> 
 
</div> 
 

 
<div class="item"> 
 
</div> 
 

 
<div class="item"> 
 
</div> 
 

 

 
<div class="item"> 
 
</div> 
 

 

 
<div class="item"> 
 
</div> 
 

 
<div class="item"> 
 
</div> 
 

 

 
<div class="item"> 
 
</div> 
 

 
<div class="item"> 
 
</div> 
 

 
<div class="item"> 
 
</div> 
 

 

 
<div class="item"> 
 
</div> 
 

 

 
<div class="item"> 
 
</div> 
 

 

 
<div class="item"> 
 
</div> 
 

 

 
<div class="item"> 
 
</div> 
 

 
<div class="item"> 
 
</div> 
 

 
<div class="item"> 
 
</div> 
 

 
<div class="item"> 
 
</div> 
 

 
<div class="item"> 
 
</div> 
 

 

 
<div class="item"> 
 
</div> 
 

 

 
<div class="item"> 
 
</div> 
 

 
<div class="item"> 
 
</div> 
 

 

 
<div class="item"> 
 
</div> 
 

 

 
<div class="item"> 
 
</div> 
 

 
<div class="item"> 
 
</div> 
 

 

 
<div class="item"> 
 
</div> 
 

 

 
<div class="item"> 
 
</div> 
 

 

 
<div class="item"> 
 
</div> 
 

 

 
<div class="item"> 
 
</div> 
 

 
<div class="item"> 
 
</div> 
 

 
<div class="item"> 
 
</div> 
 

 
<div class="item"> 
 
</div> 
 

 
<div class="item"> 
 
</div> 
 

 

 
<div class="item"> 
 
</div> 
 

 

 
<div class="item"> 
 
</div> 
 

 
<div class="item"> 
 
</div> 
 

 

 
<div class="item"> 
 
</div> 
 

 

 
<div class="item"> 
 
</div> 
 

 
<div class="item"> 
 
</div> 
 

 

 
<div class="item"> 
 
</div> 
 

 

 
<div class="item"> 
 
</div> 
 

 

 
<div class="item"> 
 
</div> 
 

 

 
<div class="item"> 
 
</div> 
 

 
<div class="item"> 
 
</div> 
 

 
<div class="item"> 
 
</div> 
 

 
<div class="item"> 
 
</div> 
 

 
<div class="item"> 
 
</div> 
 

 

 
<div class="item"> 
 
</div> 
 

 

 
<div class="item"> 
 
</div> 
 

 
<div class="item"> 
 
</div> 
 

 

 
<div class="item"> 
 
</div>

Answer 3

.item:nth-child(4n-1) { 
background-color:blue; 
} 

.item:nth-child(4n-2) { 
background-color:red; 
} 

.item:nth-child(4n-3) { 
background-color:Green; 
} 

.item:nth-child(4n) { 
background-color:black; 
} 

.item{ 
    width:100%; 
    height:100px; 
    margin-bottom:10px; 
} 

ここで解決。トリックなし