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.