Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialAakash Srivastav
Full Stack JavaScript Techdegree Student 11,638 Pointslist items
I highly doubt this would ever be applicable but what if there were 3 colors you wanted to alternate? Lets say purple, yellow and red, I assume you wouldn't be able to use the even and odd :nth-child. So just for example, again I highly doubt something like this would ever be put into play especially because it would look terrible but:
list item 1 purple bkg
list item 2 yellow bkg
list item 3 red bkg
list item 4 purple bkg
list item 5 yellow bkg
list item 6 red bkg
How would this be written to alternate between 3 (or more) colors for the lists One of the friend ask this question already but didn't got the answer so I decided to reask this question.Please help us. Thankyou
2 Answers
Patrik Horváth
11,110 Pointshave you tried combining 3 nth child css codes ? this is better way then classes
An+B
A - How manny element to skip B - Where to strat
- 3n+1 matches elements 1, 4, 7, etc.
- 3n+2 matches elements 2, 5, 8, etc.
- 3n+3 matches elements 3, 6, 9, etc. example :
li:nth-child(3n+1) {
background-color: red;
}
li:nth-child(3n+2){
background-color: green;
}
li:nth-child(3n+3) {
background-color: blue
}
Bogdan-Adrian Cornea
9,347 PointsHello,
I think you can give the list items with the same color background the same class, for exemple, for list item 1 and 4 you cand give a class of "purple-bg" and set the css to background:purple; and so on.
Hope it helps.
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,638 PointsYeah it will do....Thanks