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 trial

CSS CSS Basics (2014) Basic Selectors Descendant Selectors

Aakash Srivastav
seal-mask
.a{fill-rule:evenodd;}techdegree
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,638 Points
Posted by Aakash Srivastav
.a{fill-rule:evenodd;}techdegree
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,638 Points

list 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
Patrik Horváth
11,110 Points
Patrik Horváth
Patrik Horváth
11,110 Points

have 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
Bogdan-Adrian Cornea
9,347 Points
Bogdan-Adrian Cornea
Bogdan-Adrian Cornea
9,347 Points

Hello,

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.