Style the Nth Letter in a Span Using CSS

Style the nth letter in a span using CSS

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

how to change color of each letter of p with just css

This is a hack that uses:

• a monospace font so that each letter has a uniform width
• inline display so that the width of the container is as much as its text
• uses experimental background-clip: text to clip the background on to the text
• uses a linear-gradient to color each letter

See demo below:

.change {  font-size: 20px;  font-family: monospace;  display: inline;  -webkit-background-clip: text;  background-clip: text;  color:transparent;  background-image: linear-gradient(to right, black 40%, red 40% 60%, black 60%);}

<p class="change"> Color </p>

How to do CSS nth-child in span tags?

You should use nth-of-type

#refals_wr span:nth-of-type(odd){
    color:green;}

#refals_wr span:nth-of-type(even){
    color:orange;}

An example: http://jsfiddle.net/xzdv5csp/1/

How to do letter spacing every two letters with CSS only?

For a CSS only solution, without an nth-letter selector you're going to be dealing with workarounds. There is no nth-letter currently (although CSSWG is discussing it) as you'll no doubt know, so here's a possible workaround albeit an ugly one.

If you're happy to tweak for each instance of .number then you could use the following approach based on splitting the pairs of numbers using columns. Works pretty well for the given example:

.number {
    width: 8em;
    display: block;
    word-wrap: break-word;
    columns: 5;
    column-gap: 0.2em;
}

See: http://jsfiddle.net/WgRs6/

The width, columns and column-gap values will need to be tweaked depending on the numbers in the markup as well as the chosen font size. You'd also need to tweak them to change the space between the columns. Unfortunately, this would certainly break if there are numbers with different amount of digits (e.g. 1, 200, 3, 9000, 42, 100000). You asked for splitting between two numbers so hopefully that shouldn't be an issue for you.

Ideally you'd be able to use lettering.js, or any JavaScript which would split your letters into distinct span elements that you could then combine with .number span:nth-child(2n) to add your desired spacing. See: http://jsfiddle.net/SSq7M/

How to style using nth-of-type within a ul tag?

You have to do it like this:

li:nth-of-type(odd) > span {}
li:nth-of-type(even) > span {}

The selector nth-of-type (and also first-child, last-child or nth-child) refer to their parents. In this case the parent is the <li>-tag. So both <span>s are odd elements as both are the first-child element. And both get selected the way you defined the CSS-rule. The CSS-rule here selects their parents as they can be alternating and sets the style for the children accordingly.

---

Related Topics