CSS - Same class for multiples divs and differents colors previously set

Question

I need to set a class for multiples divs and each one of them with different background-color.

<div class="genericClass">Some Text</div> <!-- This should be #000 -->
<div class="genericClass">Some Text</div> <!-- This should be #FFF -->
<div class="genericClass">Some Text</div> <!-- This should be #B1B -->
<div class="genericClass">Some Text</div> <!-- This should be #DDD -->

.genericClass{
     background-color: #000; /* this should be the first */
     background-color: #FFF; /* this should be the second */
     background-color: #B1B; /* this should be the third */
     background-color: #DDD; /* this should be the fourth */
}

But I don't know how I can do that.

EDIT: I have no chance to know how many items could be added, so, the pattern should repeat after four divs, so, it there is five divs, the last one should take the #000 (first) color.

Unfortunately it won't be QUITE that simple. Are the divs wrapped in another element, such as a div? — JD Davis, Dec 09 '15 at 16:19
I think this can only be done by applying a sub-class to the items. Like div class="genericClass item1", div class="genericClass item2" etc. and then setting the css as .item1, .item2 etc. — Stefan Neuenschwander, Dec 09 '15 at 16:23
Hello @Jdsfighter, yep, they are inside another div if is that what you are asking for — NewJsGuy, Dec 09 '15 at 16:25
Thanks @cimmanon for the correction and the reference to that solution, but I still think that is not answering my question, I edited my post in order to detail more about what is happening. Thanks — NewJsGuy, Dec 09 '15 at 16:39
So now it is a duplicate of this question: http://stackoverflow.com/questions/3462298/select-every-nth-element-in-css — cimmanon, Dec 09 '15 at 17:10

Denis Thomas · Accepted Answer · 2015-12-10T07:57:43.970

You could use the :nth-of-type(n) selector to select an element in a specific order / position

To have the colors repeat you could use the folowing syntax: 4n + x where 4 is the cycle size so this sequence repeats every 4 elements and x is the offset + 1 targets the first element + 2 the second and so on.

Further reference: w3schools.com :nth-child() Selector

.genericClass:nth-of-type(4n + 1) {
  background-color: #000; //this should be the first
}
.genericClass:nth-of-type(4n + 2) {
  background-color:#FFF; //this should be the second
}
.genericClass:nth-of-type(4n + 3) {
  background-color: #B1B; //this should be the third
}
.genericClass:nth-of-type(4n + 4) {
  background-color: #DDD; //this should be the fourth
}

<div class="genericClass">Some Text</div>
<!-- This should be #000 -->
<div class="genericClass">Some Text</div>
<!-- This should be #FFF -->
<div class="genericClass">Some Text</div>
<!-- This should be #B1B -->
<div class="genericClass">Some Text</div>
<!-- This should be #DDD -->
<div class="genericClass">Some Text</div>
<!-- This should be #000 -->
<div class="genericClass">Some Text</div>
<!-- This should be #FFF -->
<div class="genericClass">Some Text</div>
<!-- This should be #B1B -->
<div class="genericClass">Some Text</div>
<!-- This should be #DDD -->
<div class="genericClass">Some Text</div>
<!-- This should be #000 -->
<div class="genericClass">Some Text</div>
<!-- This should be #FFF -->
<div class="genericClass">Some Text</div>
<!-- This should be #B1B -->
<div class="genericClass">Some Text</div>
<!-- This should be #DDD -->
<div class="genericClass">Some Text</div>
<!-- This should be #000 -->
<div class="genericClass">Some Text</div>
<!-- This should be #FFF -->
<div class="genericClass">Some Text</div>
<!-- This should be #B1B -->
<div class="genericClass">Some Text</div>
<!-- This should be #DDD -->
<div class="genericClass">Some Text</div>
<!-- This should be #000 -->
<div class="genericClass">Some Text</div>
<!-- This should be #FFF -->
<div class="genericClass">Some Text</div>
<!-- This should be #B1B -->
<div class="genericClass">Some Text</div>
<!-- This should be #DDD -->
<div class="genericClass">Some Text</div>
<!-- This should be #000 -->
<div class="genericClass">Some Text</div>
<!-- This should be #FFF -->
<div class="genericClass">Some Text</div>
<!-- This should be #B1B -->
<div class="genericClass">Some Text</div>
<!-- This should be #DDD -->

Hello again Denis, I edited the question, I forget to mention that I don't know how many divs could be added in the future, and I need to repeat the color pattern after four elements — NewJsGuy, Dec 09 '15 at 16:38

score 1 · Answer 2 · answered Dec 09 '15 at 16:20

You can use multiple classes.

The generic class will share common styles, and each can also have its own class for background colour.

<div class="genericClass bg1">Some Text</div> <!-- This should be #000 -->
<div class="genericClass bg2">Some Text</div> <!-- This should be #FFF -->
<div class="genericClass bg3">Some Text</div> <!-- This should be #B1B -->
<div class="genericClass bg4">Some Text</div> <!-- This should be #DDD -->

.genericClass{
    padding: 5px;
    font-family: Arial;
    font-size: 12px;
}

.bg1{
  background-color: #000; //this should be the first
}

.bg2{
  background-color: #FFF; //this should be the second
}

.bg3{
  background-color: #B1B; //this should be the third
}

.bg4{
  background-color: #DDD; //this should be the fourth
}

http://codepen.io/anon/pen/rxVxXd

Yep, but I'm trying to avoid that, I'm reading some for / each directives, I think that can do the trick. Thanks for the answer Paul — NewJsGuy, Dec 09 '15 at 16:22

CSS - Same class for multiples divs and differents colors previously set

2 Answers2