Question

The HTML:

<span class="foo">Hello</span>

I want the CSS class “foo” to be defined as follows: the first letter of the enclosed content is red, and the rest of the characters are green. Is this possible?

EDIT:

What if I want something like the opposite? I want the first letter to be EXCLUDED from any styling (except any parent styling), and all the rest of the letters to be green.

Answer 1

Use the first-letter pseudo selector:

.foo { color: green; display: inline-block; }

.foo:first-letter { color: red; }

Here’s the fiddle: http://jsfiddle.net/ZLapy/

---

Note: the :first-letter selector will not work on an inline element.
You have to use either block, inline-block or table.