Take the 2-minute tour ×

I have some floating point numbers where I would like to indicate that that the last few digits are not that important. What I have in mind is something like this.

For the number 273.978

<span style="font-weight:bold">273.9</span><span style="color:#3399ff">78</span>

It would be great if there were something like a "nth-last-chars" CSS selector. Then I could set this all up in my CSS file, instead of chopping the number in JavaScript. Is there a better way to achieve this?

EDIT: Here's what a native JavaScript solution looks like:

<span id="numstart" style="font-weight:bold">123.4</span><span id="numend" style="color:#3399ff">57</span>

var newnum = 273.978;
var numStr = String(newnum)
var numLen = numStr.length;
var newStart = numStr.substring(0,numLen-2);
var newEnd = numStr.substring(numLen-2,numLen);
document.getElementById("numstart").innerHTML = newStart;
document.getElementById("numend").innerHTML = newEnd;
share|improve this question
CSS only solution or would you accept javascript? –  stef Jan 13 '11 at 22:24
CSS would be great, but I'm not optimistic about it, so I'll take the best JavaScript solution. I'm using YUI3, but I don't think that matters. –  mjhm Jan 13 '11 at 22:30
I don't think there is a strictly CSS solution. The one you present here is pretty much what I would do and would imagine what any javascript solution would pretty much do. –  scrappedcola Jan 13 '11 at 22:31
add comment

4 Answers

up vote 4 down vote accepted

Off the top of my head in jQuery:

<script type="text/javascript">
$('.numbers').each(function() {
        $(this).html().substr(0, $(this).html().length-2)
          + "<span style='color: #3399ff'>"
          + $(this).html().substr(-2)
          + "</span>");

Here's a fiddle to demonstrate it. I'm sorry it's not plain JavaScript, but I'm sure one of the folks here can offer a native solution if this doesn't cut your corn.

UPDATE: And here's a non-jQuery solution, and another fiddle demonstrating it. I also broke the style out into CSS.

<style type="text/css">
.unimportant {
    color: #3399ff;

<script type="text/javascript">
var numberTargets = document.getElementsByClassName('number');
for(i=0; i<numberTargets.length; i++) {
    var html = numberTargets[i].innerHTML;
    numberTargets[i].innerHTML = html.substr(0, html.length-2)
      + "<span class='unimportant'>"
      + numberTargets[i].innerHTML.substr(-2)
      + "</span>";
share|improve this answer
Perfect but not working in IE8 –  delboud Feb 27 '12 at 16:01
add comment

Had the same idea as stef:

<style type="text/css">
    .number {
        font-family: monospace;
    .number:after {
        background-color: rgba(255,255,255,0.5);
        content: "";
        display: inline-block;
        height: 1em;
        width: 1.2em;
        position: relative;
        top: 0.25em;
        right: 1.2em;

<span class="number">273.978</span>
share|improve this answer
+1 for making me hit the CSS books to understand this. –  mjhm Jan 13 '11 at 23:17
add comment

Other than a server-side approach (the easiest), you could add an overlay span that has width: 1.75em; background-color: rgba(255,255,255,0.5) and fix it to the right of a container object and a z index greater than the main float display object.

If you're feeling experimental you could try the HTML5 <input type="number" step="0.1" /> element, which depending on the browser would round to the nearest value based on its value.

share|improve this answer
This seems more dicey than a JavaScript approach. Though if you work through an example I might be convinced. I'm not really feeling that experimental ;) –  mjhm Jan 13 '11 at 22:44
Yeah - I'd go server-side tbh –  stef Jan 13 '11 at 22:51
add comment

You could use PHP to add a class to the span tag for the first 3/4 chars (I assume you are using php to generate these floating point numbers) and a different class to anything after that,

Then simply add the classes to your CSS file to highlight as you wish.

AFAIK there are no CSS selectors to do what you require, the 'nth' selectors are more for tags, classes and ids than individual chars.

EDIT: In javascript this can be done via using foo.charAt(N);

So load your string into a var:

var foo=[number generation code];
var foo0=foo.charAt(0);
var foo1=foo.charAt(1);
var foo2=foo.charAt(2);
var foo3=foo.charAt(3);

You can then print out the chars into the appropriate place in the code.

share|improve this answer
The numbers are all strictly client side. –  mjhm Jan 13 '11 at 22:40
Check JS code above please. –  Myles Gray Jan 13 '11 at 22:42
add comment

Your Answer


