Forum Moderators: not2easy

Message Too Old, No Replies

Inline link focus style specification

a:focus inline style CSS

         

schuski

9:27 am on Jun 24, 2005 (gmt 0)

10+ Year Member



Hi,

Is there a possibility to specify the style for pseudo classes inline. In other words, an inline equivalent to


a.linkclass1:focus {
background-color: #3399CC;
}

The background: I have links on many different background colors shades (that come from some configuration file or are generated) and would like to set the background color for the focussed link to the same color. I could include all the styles in the header section but in this case inline would be much more convenient as every color is used exactly one time. This is specific for mobile phones where you need to explicitly set the focus background color as otherwise the focussed link gets the browser default focus background.

Thanks in advance,
Stefan

createErrorMsg

11:22 am on Jun 24, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



schuski, welcome to WebmasterWorld!

Is there a possibility to specify the style for pseudo classes inline.

There is currently no way to define pseudoclasses inline. (Although there is a Working Draft recommendation at the W3C that, should it ever become a Candidate recommendation, would allow it. This, of course, is not an implementable feature, and since the working draft is three years old, I wouldn't hold out much hope for it's progress, but it's an interesting idea. For more, see DrDoc's discussion of it here [webmasterworld.com], or the Working Draft document [w3.org], itself.)

For now, however, we're limited to pseudoclasses as internal or external CSS. If you really don't want to define the styles in an external stylesheet or in the head of the document, you'll have to fall back on inline javascript mouseovers...

<a href="#" onmouseover="this.style.backgroundColor='red'" onmouseout="this.style.backgroundColor='transparent'">Link Text</a>

cEM

schuski

11:48 am on Jun 24, 2005 (gmt 0)

10+ Year Member



Thanks for the information. I might go for a generated header approach with is pretty easy with Velocity, or tell the designers it isn't possible. Just a prototype.
JavaScript unfortunately is no option as it is not support on (most) phones.