CODEWITHSUNDEEP
css
Jackson
Jackson

Reputation: 820

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.

Upvotes: 1

Views: 3099

Answers (3)

Victor Kolb
Victor Kolb

Reputation: 21

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

Here a solution. Without tricks

Upvotes: 2

Turnip
Turnip

Reputation: 36742

@ambs proved me wrong but I'll leave this here as an alternative anyway.

I don't think this is possible using nth-child in the way that you tried.

You could however combine nth-child with the adjacent sibling selector:

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

Upvotes: 2

ambs
ambs

Reputation: 487

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

Upvotes: 4

Related Questions