CODEWITHSUNDEEP
javascriptcssstylingpseudo-class
user623990
user623990

Reputation:

Style the nth letter in a span using CSS

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.

Upvotes: 10

Views: 16698

Answers (4)

Borbo
Borbo

Reputation: 11

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/

Upvotes: 1

orb
orb

Reputation: 1284

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;
}

Upvotes: 3

Fabr&#237;cio Matt&#233;
Fabr&#237;cio Matt&#233;

Reputation: 70139

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).

Upvotes: 8

dev
dev

Reputation: 3999

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.

Upvotes: 3

Related Questions