Css to target individual characters in a word?

HTML & CSS
1

Hi,

Is there no way to target the last 5 characters of a word?

ie:

<h1>Frontlight Moth Zapper</h1>

I want to make light to be a different color than front.

Is there anything more specific than nth child even/odd to target text characters? I tried inserting a span element to target the word within it’s sentence context, but have found nothing else.

I know I can do this in excel, so I’ll be darned if I can’t with css.

Thanks

2

To do it with CSS alone, yes, you’d need to wrap those letters in an element like a span. You’d be able to do it with a dash of JS, though.

3

If it was a just a one-off effect on non-dynamic text you could do it like this:


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
h1{position:absolute;margin:0;font-size:180%}
h1:before{
	content:"light";
	position:absolute;
	left:2.44em;
	color:red;
	background:#fff;	
}
</style>
</head>

<body>
<h1>Frontlight Moth Zapper</h1>
</body>
</html>

Otherwise as Ralph said you are left with either spans or js.