10

I have:

<span id="string">12h12m12s</span>

and I'm looking to make the h, m and s smaller than the rest of the text. I've heard of the nth-letter pseudo element in css, but it doesn't seem to be working:

#string:nth-letter(3), #string:nth-letter(6), #string:nth-letter(9) { font-size: 2em; }

I know I could use javascript to parse the string and replace the letter with surrounding span tags and style the tags. However, the string is updated every second and it seems parsing that often would be ressource intensive.

Improve this question
12
  • 12
    Because such a thing does not exist. You've probably read it from a blog suggesting its implementation - see css-tricks.com/a-call-for-nth-everything and scroll down to "::nth-letter() / ::last-letter() / ::nth-last-letter()" - and yes, you can easily achieve this with JS. Commented Apr 14, 2013 at 0:08
  • @FabrícioMatté, I had a feeling... Could you suggest another way of doing this (in js I assume) that would be efficient enough to be run every second? Commented Apr 14, 2013 at 0:10
  • Maybe something like this codepen.io/FWeinb/pen/djuIx Commented Apr 14, 2013 at 0:11
  • 2
    I've used JavaScript to create a clock which uses span elements to contain the hours, minutes, seconds. If you give each of these span elements a unique id attribute, you can simply use JavaScript to target and update the content of just that element. Performance is excellent, and you can use CSS to style each component differently. Commented Apr 14, 2013 at 0:12
  • 1
    What I meant is e.g. before the loop: var seconds = document.getElementById('seconds'); then use seconds instead of document.getElementById('seconds') inside the loop. Here's a more detailed article: phpied.com/dom-access-optimization Commented Apr 14, 2013 at 0:16

4 Answers 4

Reset to default
8

Performance-wise, I'd recommend a span hell.

<span id="string"><span id="h">12</span><span class="h">h</span><span id="m">12</span><span class="m">m</span><span id="s">12</span><span class="s">s</span></span>

One span for each h, m and s letters so you can style them properly (can apply either the same or different styling for each).

And another span for each number so you can cache the references. In sum, here's a JS for a very simplistic local-time clock:

//cache number container element references var h = document.getElementById('h'), m = document.getElementById('m'), s = document.getElementById('s'), //IE feature detection textProp = h.textContent !== undefined ? 'textContent' : 'innerText'; function tick() { var date = new Date(), hours = date.getHours(), mins = date.getMinutes(), secs = date.getSeconds(); h[textProp] = hours < 10 ? '0'+hours : hours; m[textProp] = mins < 10 ? '0'+mins : mins; s[textProp] = secs < 10 ? '0'+secs : secs; } tick(); setInterval(tick, 1000);

Fiddle

This illustrates the basic idea of cached selectors. By not re-creating the elements, you also have a good performance boost.

Though, once a second isn't very heavy work for something so simple (unless you have hundreds of clocks in your page).

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

1 Comment

That was the most entertaining intro to an answer
3

This might be a long winded way of doing this using javascript and jQuery, but here's a possible solution.

Separate the h,m & s from the original string. 

string = $('#string').text(); hD = string.substr(0,2) h = "<span>"+string.substr(2,1)+"</span>"; mD = string.substr(3,2) m = "<span>"+string.substr(5,1)+"</span>"; sD = string.substr(6,2) s = "<span>"+string.substr(8,1)+"</span>"; finalString = hD + h + mD + m + sD + s; $('#string').html(finalString);

Then you can style the spans within #string with CSS. 

#string{font-size:1.2em} #string > span{font-size:0.8em}

Here is a demo fiddle showing the above.

Improve this answer

Comments

3

This only throws the letters in spans and gives them all the same class. Maybe worth an honorable mention lol :-)

jsFiddle

JavaScript:

var str = document.getElementById('string'), chars = str.innerHTML.split(''); for (var i = 0; i < chars.length; i++) { if (chars[i].match(/[hms]/)) { chars[i] = "<span class='smaller'>" + chars[i] + "</span>"; } } str.innerHTML = chars.join('');

HTML:

<body> <span id="string">12h12m12s</span> </body>

CSS:

.smaller { font-size: 10px; }
Improve this answer

4 Comments

Actually, you can delete the whole for loop, and replace the final line with:
str.innerHTML=str.innerHTML.replace(/([hms])/gi,'<span>$1</span>');
The css then becomes: *#string span{font-size:10px}
If you want to style them individually, use for each, this css: *#string span:nth-of-type(n){...css...}, where n is the ordinal number of the span, and ...css... is whatever css you want for each
1

Simple solution with CSS and wrapping each character with a span-tag:

#text span:nth-child(2) { color: #ff00ff; } #text span:nth-child(5) { color: #00ffff; } #text { font-size: 20px; } <span id="text"><span>H</span><span>e</span><span>l</span><span>l</span><span>o</span></span>

https://jsfiddle.net/f8vffLj0/

Improve this answer

Comments