Question

I am trying to make a post system in which I want different right border color for each post. But I want to use a maximum of 4 colors.The first four posts will have four different colors, and then again the next four posts will have the colors of the first four posts (different again for each four posts). I know how to do it via odd and even nth element in css. For example I tried:

li:nth-child(odd) {
  border-left:1px solid #ff0000;
}
li:nth-child(even) {
  border-left:1px solid #0000ff;
}

How to do it the way I want: the first four a different color, and then again the next four with the same colors, and again for the next four?

Answer 1

use these:

li:nth-child(4n+1) { /* Every first */
  border-left:1px solid #ff0000;
}
li:nth-child(4n+2) { /* Every second */
  border-left:1px solid #0000ff;
}
li:nth-child(4n+3) { /* Every third */
  ...
}
li:nth-child(4n+4) {/* Every fourth */
  ...
}