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.
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.
Share Improve this question edited Dec 18, 2014 at 5:40 Roko C. Buljan 207k41 gold badges327 silver badges337 bronze badges asked Jul 8, 2013 at 0:44 Chris G-JonesChris G-Jones 6264 gold badges14 silver badges27 bronze badges 5-
I think that is not possible only with CSS. You have the
:first-letterpseudo-element... But each letter, I think that isn't possible. – leoMestizo Commented Jul 8, 2013 at 0:49 - you'd have to grab the content of the span jQuery('.kkc-dni').html(), then iterate over each letter String.split(""), then add each letter to its own span. to go further into explanation, would have to know more about how you want to color each letter – Marc Commented Jul 8, 2013 at 0:51
- Thank you Marc, yes I thought that this would be possible with some jQuery. Was hoping that there would be a CSS selector for each character – Chris G-Jones Commented Jul 8, 2013 at 0:52
- you could also do something clever if the font is fixed width. you could make a background image with the colors you need. – Marc Commented Jul 8, 2013 at 0:57
- Thanks Marc, think I will do some jQuery and wrap each character. Feel like I have more control that way as opposed to an image. Good idea though! – Chris G-Jones Commented Jul 8, 2013 at 1:02
3 Answers
Reset to default 4I 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./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./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.
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.
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/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.