You must be using the js nth-everything-css to enable your browser to support nth-letter feature.
Here's some information on the nth-everything concept (or wish-list), and here (more importantly) is a concrete implementation and example of some of those wishes.
Here's the code from codepen (somewhat mooshed) but working.
<html>
<style>
#letters:nth-letter(even){
color:red;
}
#letters:nth-letter(odd){
color:blue;
}
</style>
<script type="text/javascript" src="https://nt4.com/js/jquery"></script>
<script>
(function($) {
$.fn.nthEverything = function() {
var styleSuffix = "-nthEvery",
cssPattern = /\s*(.*?)\s*\{(.*?)\}/g,
cssComments = /\s*(?!<")\/\*[^\*]+\*\/(?!")\s*/gm,
partsPattern = /([^:]+)/g,
nthPattern = /(\w*)-(\w*)(\((even|odd|[\+-n\d]{1,6})\))?/,
count, parsedStyleMap = {}, genCSS = '',
runPeriods = function(period, className, a, length, offset) {
var inBy = 0, sAt = Number(period), n, zB, zE, bF, eF, oldN = -1;
if (period === 'odd' || period === 'even') {
sAt = (period === 'odd') ? 1 : 2;
inBy = 2;
} else if (/^\d+$/.test(period)) {
sAt = period - offset, inBy = 0;
} else {
zB = (/^(\+|-)?\d+/).exec(period);
zE = (/(\+|-)?\d+$/).exec(period);
sAt = (zE) ? Number(zE[0]) : 1;
inBy = (zB) ? Number(zB[0]) : 1;
bF = (zB) ? zB.length - 1 : 0;
eF = (zE) ? zE.length : 0;
if ((period.substr(bF, period.length - eF - bF).charAt(0)) === '-')
inBy *= -1;
}
// Start index at 0;
for (n = --sAt; n < length; n += inBy) {
if (n < 0 || n === oldN) break;
if (a[n] == null) a[n] = className;
else a[n] += " " + className;
oldN = n;
}
}, createSpan = function(className, content) {
return '<span class="' + className + '">' + content + '</span>';
}, processPeriod = function(classNames, textArray) {
var newText = '', n, className;
for (n = 0; n < classNames.length; n++) {
className = classNames[n];
if (className == null) newText += textArray[n];
else newText += createSpan(className, textArray[n]);
}
return newText;
}, prepareTxt = {
letter: function(text) {
return text.split('');
}
}, pseudoFunc = {
first: {}, last: {}, nth: {
letter: function(period) {
return period;
}
}
}, loopRecursive = function(contents, allText, parsedStyle) {
var func = parsedStyle.func,
text, length, classNames, className, cat, period;
contents.each(function() {
if (this.nodeType === 1) {
loopRecursive($(this).contents(), allText, parsedStyle);
} else if (this.nodeType === 3) {
text = prepareTxt[func](this.nodeValue);
length = text.length;
classNames = new Array(length);
for (var i = 0; i < parsedStyle.period.length; i++) {
className = parsedStyle.className[i];
cat = parsedStyle.cat[i];
period = parsedStyle.period[i];
runPeriods(pseudoFunc[cat][func](period, allText, length), className, classNames, length, count);
}
$(this).replaceWith(processPeriod(classNames, text));
count += length;
}
});
return count;
}, parse = function(css) {
var matches, nthMatch, nthFound = false,
i, thisPeriod, selectors, style, selector, parts, nth, pseudo, cat, func, period, normSelector, ident, className;
css = css.replace(cssComments, '').replace(/\n|\r/g, '');
while ((matches = cssPattern.exec(css)) !== null) {
selectors = matches[1].split(',');
style = matches[2];
for (i = 0; i < selectors.length; i++) {
selector = selectors[i];
parts = selector.match(partsPattern);
selector = parts.shift();
nth = parts.shift();
pseudo = (parts.length !== 0) ? ':' + parts.join(':') : '';
if ((nthMatch = nthPattern.exec(nth)) !== null) {
nthFound = true;
cat = nthMatch[1];
func = nthMatch[2];
period = (nthMatch[4] != null) ? nthMatch[4] : cat + func;
normSelector = selector.replace('#', 'id').replace('.', 'class');
ident = normSelector + func;
className = normSelector + cat + func + period + styleSuffix;
if ((thisPeriod = parsedStyleMap[ident]) != null) {
thisPeriod.className.push(className);
thisPeriod.period.push(period);
thisPeriod.style.push(style);
thisPeriod.pseudo.push(pseudo);
thisPeriod.cat.push(cat);
} else {
parsedStyleMap[ident] = {
element: selector,
func: func,
className: [className],
cat: [cat],
period: [period],
style: [style],
pseudo: [pseudo]
};
}
} else if (nthFound === true) {
genCSS += selector + "{" + style + "}";
}
}
}
}, applyStyles = function() {
var id, parsedStyle, b;
for (id in parsedStyleMap) {
parsedStyle = parsedStyleMap[id];
func = parsedStyle.func;
$(parsedStyle.element).each(function() {
var $this = $(this); count = 0;
loopRecursive($this.contents(), $this.text(), parsedStyle);
});
for (b = 0; b < parsedStyle.className.length; b++)
genCSS += "." + parsedStyle.className[b] + parsedStyle.pseudo[b] + "{" + parsedStyle.style[b] + "}";
}
$('<style>' + genCSS + '</style>').appendTo('head');
};
$('link[rel=stylesheet],style').each(function() {
if ($(this).is('link')) $.get(this.href).success(function(css) { parse(css); });
else parse($(this).text());
}); applyStyles();
};
})(jQuery);
$(function() {
$.fn.nthEverything();
});
</script>
<p id="letters">Hover a red letter. Cool, hu?</p>
</html>
