Applying CSS to single characters dynamically?

Question

I am using JavaScript/jQuery to populate a date field on my page. I want to add CSS styling to each individual character of the generated date and wondering if it is possible and how I could go about doing it. Basically, I want the end result to look like this:

enter image description here

Here is my code which is generating the date:

HTML:

<div class="date"></div>

JavaScript:

var monthNames = [ "JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC" ];
var dNow = new Date();
var date = (monthNames[dNow.getMonth()]) + ' '
         + ('0' + dNow.getDate()).slice(-2) + ' '
         + dNow.getFullYear();
$('.date').text(date);

Here's a JSFiddle.

Make a static version of this clock with styles. When you got the CSS you need, just use js to inject the numbers. Are you asking about how to make those styles or something? — Huangism
– Huangism, Commented Nov 13, 2014 at 15:44

Terry · Accepted Answer · 2014-11-13 15:56:34Z

8

I am not sure if OP is asking for a means to split the characters into its own self-containing element only, or also for the CSS solution that approximates the screenshot. My answer does both — see demo fiddle here: http://jsfiddle.net/teddyrised/pv9601hj/4/

For splitting the date string, you will have to rely on JS, something like:

var monthNames = [ "JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC" ];
var dNow = new Date();
var date = (monthNames[dNow.getMonth()]) + ' '
         + ('0' + dNow.getDate()).slice(-2) + ' '
         + dNow.getFullYear();
var dateSplit = date.split("");
$('.date').html('<span>'+dateSplit.join('</span><span>')+'</span>');

For the CSS, it is simply a clever use of CSS3 flexbox specification and pseudo-elements:

.date {
    background-color: #000;
    display: flex;
}
.date span {
    border-radius: 4px;
    box-shadow: inset 0 0 1px 2px rgba(255,255,255,.125);
    color: #fff;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 2em;
    line-height: 2em;
    margin-right: 4px;
    overflow: hidden;
    position: relative;
    width: 1em;
    height: 2em;
    text-align: center;
}
.date span::before {
    background-color: rgba(255,255,255,.2);
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
}
.date span::after {
    background-image: linear-gradient(
        to bottom,
        rgba(0,0,0,.1) 0%,
        rgba(0,0,0,.25) 50%,
        rgba(255,255,255,.25) 50%,
        rgba(255,255,255,.1) 100%
        );
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

answered Nov 13, 2014 at 15:56

Terry

66.7k16 gold badges107 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user13286 Over a year ago

I suppose I should have been more clear about that. I was really only looking for how I could apply the CSS to each individual character and planning on attempting the actual styling myself, but this is extremely helpful. Thank you!

Edd Morgan · Accepted Answer · 2014-11-13 15:47:40Z

5

It's not possible to apply CSS to individual characters, only to elements. Therefore, you need simply to split your characters into elements! Wrap each character in a span, and you can apply CSS to each of those spans (each of which contains just one character).

Something like this (full JSFiddle):

var chars = date.split("");

$.each(chars, function(i, char) {
   $(".date").append("<span>" + char + "</span");
});

answered Nov 13, 2014 at 15:47

Edd Morgan

2,92319 silver badges22 bronze badges

2 Comments

ovi Over a year ago

an alternative to using the jQuery.each method described above, would be to simply use $(".date").html("<span>" + chars.join("</span><span>") + "</span>");

Edd Morgan Over a year ago

@ovi Sure - I'd say that was much less readable but that's an alternative if you favour brevity

low_rents · Accepted Answer · 2014-11-13 15:56:23Z

you have to split the string up into characters by yourself:

your fiddle with my extension

var monthNames = [ "JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC" ];
var dNow = new Date();
var date = (monthNames[dNow.getMonth()]) + ' '
         + ('0' + dNow.getDate()).slice(-2) + ' '
         + dNow.getFullYear();

var date_split = date.split("");
var date_html = '';

date_html += '<span class="red">' + date_split[0] + '<span>';
date_html += '<span class="green">' + date_split[1] + '<span>';
date_html += '<span class="blue">' + date_split[2] + '<span>';
date_html += '<span class="red">' + date_split[3] + '<span>';
date_html += '<span class="green">' + date_split[4] + '<span>';
date_html += '<span class="blue">' + date_split[5] + '<span>';
// ... and so on


$('.date').html(date_html);

this way you can give each character it's individual classand style.

Collectives™ on Stack Overflow

Applying CSS to single characters dynamically?

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related