The color of each character is different

Question

I am using KK Countdown to count down to Xmas for the site.

I have a project that I have to complete that has every letter of the daily account with a blue background and a border radius.

Now html is output as follows

<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 kkc-dni class is the part I'm trying to target.

I want to add a background color for each letter within this range.

Preferably with CSS. Is it possible?

I used CSS before to style the first letter of paragraphs, but this is completely different, and I cannot find any information about this.

Any suggestions?

Note. Since I use the plugin for this countdown, I'm not sure if I can change the way the spaces and html are displayed. If I could wrap each letter in between, I would do it.

Answer 1

I want to add a background color for each letter within this range.

Using an array of colors:

Live demo

 var myColors = ["#cf5", "green", "purple", "blue"]; // YOU CAN ADD MORE COLORS! $('.kkcountdown-box').find('span').each(function(){ var $el = $(this), text = $el.text(), len = text.length, coLen = myColors.length, newCont = ''; for(var i=0; i<len; i++){ newCont += '<span style="background:'+ myColors[i%coLen] +'">'+ text.charAt(i) +'</span>'; } $el.html(newCont); }); 

The above will, wrapping each individual letter in a separate span , will also add the background color from your Array color list.
As soon as the end of the color list is reached, it will start from the first, etc.

Using random color:

Live demo

 $('.kkcountdown-box').find('span').each(function(){ var $el = $(this), text = $el.text(), len = text.length, newCont = ''; for(var i=0; i<len; i++){ var bgColor= '#'+ (Math.random() * 0xffffff).toString(16).substr(-6); newCont += '<span style="background:'+bgColor+'">'+ text.charAt(i) +'</span>'; } $el.html(newCont); }); 

The above information will receive every letter inside the <span> and transfer it to a new span with a randomly created background color.

Answer 2

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

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

Answer 3

Assuming you're not trying to give each letter a different background color, you can simply specify CSS for each range as follows:

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

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

If you want each letter to have a different background color or different unique CSS, you will have to wrap each letter in a separate window. You can do this programmatically using JS if you cannot control the generated HTML.