Color every character differently

Question

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 b

Answer 1

You cannot style each letter of word without individually wrapping characters. This is the simple answer to the question, especially as asked in the the title.

However, the wrapping can be done with server-side scripting, or with client-side scripting. If this is acceptable, you should reformulate your question.

Answer 2

Assuming you aren't trying to give each letter a different background color, you can just specify CSS for each span like this:

.kkc-dni {background-color: red;}

Example here: http://jsfiddle.net/jfriend00/WAPds/

If you want each letter to have a different background color or other unique CSS, then you will have to wrap each letter in its own individual span. You can do that programmatically using JS if you can't control the generated HTML.

Answer 3

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.