Use custom tag attribute values in CSS styles

Question

In essence what I'm trying to do is create a CSS style that can use the values of custom tag attributes as their values. I've read about the "attr()" function and it seems to work only in the content property of :before/:after selectors. Basically I'd like to do something like the following:

HTML

<span fgprop="#ff0000">Some Text</span>
<span fgprop="#00ff00">Other</span>

CSS

span {
    color : attr(fgprop);
}

The alternative to accomplish this, which I'm using now,is to use jQuery css() to set the color on each span with its fgprop attr value, but that seems very clunky since this approach won't automatically react to changes in the fgprop property. CSS seems the best place for this as its a presentation only level transformation.

Is there a way to do this? (Right now I'm only targeting webkit, so some kind of -webkit- specific extension would work for my use case, if that matters). Thanks in advance!

What you're asking about is a supposed new feature in CSS3 (in CSS2.1 you could only retrieve strings), but I can't find any documentation about whether the new version is supported in any browsers yet. I can only find the Attribute References Documentation which explains its use. Likely, it's just not supported yet. — animuson
– animuson ♦, Commented Dec 20, 2011 at 4:12
Yeah, even Chrome 16 doesn't support the CSS 3 version. By the way, all custom attributes must be prefixed by data-. — Tyler Crompton
– Tyler Crompton, Commented Dec 20, 2011 at 4:17

nnnnnn · Accepted Answer · 2011-12-20 04:19:22Z

5

Isn't this situation exactly what inline styles are for:

<span style="color:#ff0000">Some Text</span>
<span style="color:#00ff00">Other</span>

If you're going to specify the colours as attributes on individual elements anyway why overcomplicate it by having your stylesheet try to refer back to an fgprop attribute? A style attribute is just as easy to generate server-side, and just as easy to update client-side.

answered Dec 20, 2011 at 4:19

nnnnnn

150k30 gold badges210 silver badges247 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Use custom tag attribute values in CSS styles

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related