Jackson Jackson - 2 months ago 5
CSS Question

Change background color of every 2nd and 3rd and 4th element?

I'm trying to change the background color of every 2nd and 3rd and 4th.

So basically the order I need them to be is:

Green, Red, Blue, Black.

This is my Fiddle

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

and this is my CSS code:

.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;
}


Could someone please advise on this issue?

Any help would be appreciated.

This is not about odds and evens AS SUGGESTED IN OTHER QUESTIONS.

Answer

This should do the trick:

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;
}
Comments