Color every character differently

css, javascript, jquery

Solution

I want to add a background colour to each letter inside that span.

Using an array of colors:

const colors = ["#0bf", "#f0b", "#fb0", "#b0f"];

$('.kkc').find('span').each(function() {

  const text = $(this).text();
  const len = text.length;
    
  const newCont = [...text].reduce((a, ch, i) => 
    a + `<span style="background:${colors[i % colors.length]}">${ch}</span>`, ""
  );

  $(this).html(newCont);

});

.kkcountdown-box>span>span {
  background: red;
}

<div class="kkc">
  <span class="kkc-dni">169</span>
  <span class="kkc-dni-text">DAYS </span>
  <span class="kkc-godz">23</span>
  <span class="kkc-godz-text"> </span>
  <span class="kkc-min">19</span>
  <span class="kkc-min-text"> </span>
  <span class="kkc-sec">48</span>
  <span class="kkc-sec-text">HOURS</span>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

The above will, wrapping every single letter into a separate `span` will also add a background color from your Array list of colors. Once the colors list end is reached will start from the first one and so on.

Using a random color:

$('.kkc').find('span').each(function() {

  const text = $(this).text();
  const len = text.length;
    
  const newCont = [...text].reduce((a, ch, i) => {
    const color= '#'+ (Math.random() * 0xffffff).toString(16).substr(-6); 
    return a + `<span style="background:${color}">${ch}</span>`
  }, "");

  $(this).html(newCont);

});

.kkcountdown-box>span>span {
  background: red;
}

<div class="kkc">
  <span class="kkc-dni">169</span>
  <span class="kkc-dni-text">DAYS </span>
  <span class="kkc-godz">23</span>
  <span class="kkc-godz-text"> </span>
  <span class="kkc-min">19</span>
  <span class="kkc-min-text"> </span>
  <span class="kkc-sec">48</span>
  <span class="kkc-sec-text">HOURS</span>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

The above will get every letter inside a `<span>` and wrap it into a new `span` with a randomly generated background color.

Problem

I am using KK Countdown to countdown to Xmas for a site. I have a design which I have to follow that has each letter of the day countown with a blue background and border radius. Right now the html is output like this ``` <span class="kkcount-down" data-time="1387929600"> <span class="kkcountdown-box"> <span class="kkc-dni">169</span> <span class="kkc-dni-text">DAYS </span> <span class="kkc-godz">23</span> <span class="kkc-godz-text"> </span> <span class="kkc-min">19</span> <span class="kkc-min-text"> </span> <span class="kkc-sec">48</span> <span class="kkc-sec-text">HOURS</span> </span> </span> ``` The class kkc-dni is the part I am trying to target here. I want to add a background colour to each letter inside that span. Preferably with CSS. Is this possible? I have used CSS before to style the first letter of paragraphs before but this is quite different and I cannot find any information on it. Any suggestions? Note: Because I am using a plugin to do this countdown I am not sure if I can change the way it outputs the spans and html. If I could wrap each letter in a span I would.

Original source