Reputation: 820
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
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
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
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