Home/ Questions/Q 6967329
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T16:18:25+00:00

In essence what I’m trying to do is create a CSS style that can

  • 0

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!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0