Get :first-letter of :hover element with CSS

Question

Is it possible to get the first letter of an element while in 'hover mode'? This is how it would look - I think - but it's not working in Chrome 10:

p:hover:first-letter

or

p:first-letter:hover

Technically (imho) they're not the same. The first takes the first letter of the hovering element. The second takes the entire element if the first letter is hovering. I require the first.

As you can see on http://css4.hotblocks.nl if you 'enable' the CSS blocks, both don't work.

I want only the first letter of the element to color red, when the entire element is in :hover mode. Is it possible without additional HTML tags? Thanks.

-- edit I've changed my online example for the better. CSS is now divided in separate <style> blocks. Makes for easier turning on and off try-outs.

Conclusion - so far!? - is this: In Firefox 3.6/4 a:first-letter:hover does nothing (good) and a:hover:first-letter works perfectly (good!). In Chrome 10 a:first-letter:hover does nothing (good) and a:first-letter:hover breaks the previous CSS 'statement'. (In my example it breaks nothing because it's in a separate <style> block.) Which brings us to: once again Google Chrome lags behind Firefox =( --edit

Answer 1

I've checked your example and I have to say it works, on Fx 3.6.13

p:hover:first-letter {
    color: blue
}

Only what you have to do, is change color of first letter. Because hover has the same color as text, so you didn't notice any visual change.

Answer 2

Both the :first-line and :first-letter pseudo-elements are defined in the spec as only applying to blocks. The a element is inline by default, so :first-letter doesn't apply to it unless you change it into a block element. I think Chrome is actually the one working correctly here, though it's inconvenient and I don't know why it didn't occur to the W3C that inline elements can have first letters too.

As an admittedly imperfect workaround, you could add a {display: inline-block} or similar in order to get the styling.