12h12m12s and I'm looking to make h , m and s smaller than the rest of the te...">
Geek Answers Handbook

CSS n-th range style using CSS

I have:

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

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

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

I know that I could use javascript to parse a string and replace a letter with surrounding span tags and tag style. However, the line is updated every second, and it seems like it's a parsing that will often have an intensive resource.

+8
javascript css styling pseudo-class
source share
4 answers

Effectively, I would recommend hell> t20>.

 <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 range for each h , m and s letters so that you can draw them correctly (the same or different style can be used for each of them).

And another range for each number so you can cache links. In general, here is JS for a very simplified local 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. Without recreating elements, you can also increase productivity.

Although, once a second it’s not very hard work for something so simple (unless you have hundreds of hours on your page).

+7
source share

It may be a long and easy way to do this with javascript and jQuery, but here you can find a solution.

Separate h , m and 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);

You can then create the scroll in #string using CSS.

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

Here is a demo fiddle showing above .

+3
source share

It only throws letters into spaces and gives them all the same classes. Perhaps worth the honorable mention of 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; }
+3
source share

A simple solution with CSS and wrapping each character using the 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/

0
source share

More articles:


All Articles