For the nth-child loop, change the style of article elements that are nested at different levels
For each article, how do I go through a set of six background colors if the elements are nested at different levels?
Is this possible with CSS or do I need to add the class name to each of the articles (.loop1-6)? I would rather not go the JS route.
article:nth-child(6n+1) {
background: red;
}
article:nth-child(6n+2) {
background: blue;
}
article:nth-child(6n+3) {
background: orange;
}
<div class="home">
<div>
<article>1 - red</article>
</div>
<div>
<article>2 - blue</article>
</div>
<div>
<article>3 - orange</article>
</div>
<div>
<div>
<article>4 - green</article>
</div>
<div>
<article>5 - purple</article>
</div>
<div>
<article>6 - pink</article>
</div>
</div>
<!-- ...loop repeats... -->
<div>
<article>1 - red</article>
</div>
</div>
+3
source to share
1 answer
I am assuming that the order you put in your code above is the order it will stay in.
.home > div:nth-child(4n + 1) {
color:red;
}
.home > div:nth-child(4n + 2) {
color:blue;
}
.home > div:nth-child(4n + 3) {
color:orange;
}
.home > div:nth-child(4n + 4) {
color:green;
}
.home > div > div:nth-child(2) {
color:purple;
}
.home > div > div:nth-child(3) {
color:pink;
}
<div class="home">
<div>
<article>1 - red</article>
</div>
<div>
<article>2 - blue</article>
</div>
<div>
<article>3 - orange</article>
</div>
<div>
<div>
<article>4 - green</article>
</div>
<div>
<article>5 - purple</article>
</div>
<div>
<article>6 - pink</article>
</div>
</div>
<!-- ...loop repeats... -->
<div>
<article>1 - red</article>
</div>
<div>
<article>2 - blue</article>
</div>
<div>
<article>3 - orange</article>
</div>
<div>
<div>
<article>4 - green</article>
</div>
<div>
<article>5 - purple</article>
</div>
<div>
<article>6 - pink</article>
</div>
</div>
<div>
<article>1 - red</article>
</div>
<div>
<article>2 - blue</article>
</div>
<div>
<article>3 - orange</article>
</div>
<div>
<div>
<article>4 - green</article>
</div>
<div>
<article>5 - purple</article>
</div>
<div>
<article>6 - pink</article>
</div>
</div>
<div>
<article>1 - red</article>
</div>
<div>
<article>2 - blue</article>
</div>
<div>
<article>3 - orange</article>
</div>
<div>
<div>
<article>4 - green</article>
</div>
<div>
<article>5 - purple</article>
</div>
<div>
<article>6 - pink</article>
</div>
</div>
</div>
+3
source to share