CODEWITHSUNDEEP
javascriptjqueryhtmlcss
DreamTeK
DreamTeK

Reputation: 34177

Apply a predefined sequence of colors to a dynamic list of elements

QUESTION

How can each .Block be assigned a unique background colour with the following caveats:

NOTE: I am trying to ahieve this in css but will resort to javascript, jquery if required.

.Block{
  display:block;
  height:50px;
  width:100%;
  background:red;
}
<div class="Wrap">
  <div class="Block">RED</div>
  <div class="Block">BLUE</div>
  <div class="Block">GREEN</div>
  <div class="Block">ORANGE</div>
  <div class="Block">PURPLE</div>
</div>

Upvotes: 2

Views: 944

Answers (2)

Jordan Burnett
Jordan Burnett

Reputation: 1844

You could do this in CSS3 using the nth-child selector. The nth-child selector accepts simple expressions which you can use to target certain elements in a sequence. 

.Block{
  display:block;
  height:50px;
  width:100%;
  background:red;
}

.Block:nth-child(5n + 1){
    background-color: red;
}
.Block:nth-child(5n + 2){
    background-color: blue;
}
.Block:nth-child(5n + 3){
    background-color: green;
}
.Block:nth-child(5n + 4){
    background-color: orange;
}
.Block:nth-child(5n + 5){
    background-color: purple;
}

This works by targeting every second element, then every third element etc. meaning the sequence will loop no matter how many 'blocks' you have in your container.

Working demo here:

.Block {
  display: block;
  height: 50px;
  width: 100%;
}

.Block:nth-child(5n + 1) {
  background-color: red;
}

.Block:nth-child(5n + 2) {
  background-color: blue;
}

.Block:nth-child(5n + 3) {
  background-color: green;
}

.Block:nth-child(5n + 4) {
  background-color: orange;
}

.Block:nth-child(5n + 5) {
  background-color: purple;
}
<div class="Wrap">
  <div class="Block">RED</div>
  <div class="Block">BLUE</div>
  <div class="Block">GREEN</div>
  <div class="Block">ORANGE</div>
  <div class="Block">PURPLE</div>
  <div class="Block">RED</div>
  <div class="Block">BLUE</div>
  <div class="Block">GREEN</div>
  <div class="Block">ORANGE</div>
  <div class="Block">PURPLE</div>
</div>

Browser support for this is IE9+, however polyfills exist if you need to target older browsers. There's some more useful information about how nth-child works here: http://css-tricks.com/how-nth-child-works/

Upvotes: 2

Hoijof
Hoijof

Reputation: 1413

If the content is added at once you can do it like this (or run the script every time that the content is changed):

 function styleBlock() {
    var colors = ["red","blue","yellow"],
        counter = 0;    
    $(".Wrap .Block").each(function(){   
        $(this).css("background-color",colors[counter ]);
        counter = counter % colors.length;
        counter += 1;
    });
}

$(".Wrap").append('<div class="Block">DYNAMICALLY ADDED</div>');
styleBlock();

I'm doing some research right now to see if it's possible doing it only with CSS.

Code snippet here:

function styleBlock() {
  var colors = ["red", "blue", "yellow"],
    counter = 0;
  $(".Wrap .Block").each(function() {
    $(this).css("background-color", colors[counter]);
    counter = counter % colors.length;
    counter += 1;
  });
}

$(".Wrap").append('<div class="Block">DYNAMICALLY ADDED</div>');
styleBlock();
.Block {
  display: block;
  height: 50px;
  width: 100%;
  background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="Wrap">
  <div class="Block">RED</div>
  <div class="Block">BLUE</div>
  <div class="Block">GREEN</div>
  <div class="Block">ORANGE</div>
  <div class="Block">PURPLE</div>
</div>

Upvotes: 1

Related Questions