29

I'm trying to add color to different element with a data attribute in my css but doensn't work ...

I follow this instructions :

The attr() Function: Properties Values Collected from the Edited Document.

W3C

HTML

<table>
    <tr>
        <td>
            <span class="bgborder" data-color="#e7663f"></span>
            <i class="fa fa-copy"></i>
        </td>
        <td>
            <span>Blaablaaablaaa</span>
        </td>
    </tr>
</table>
<table>
    <tr>
        <td>
            <span class="bgborder" data-color="#77c385"></span>
            <i class="fa fa-upload fa-fw"></i>
        </td>
        <td>
            <span>Blablaablaaa</span>
        </td>
    </tr>
</table>

CSS

.bgborder {
    display: block;
    width: 5px;
    height: 100%;
    position: absolute;
    top: 0;
    background-color: attr(data-color color);
}

Nothing appears...Am I right ?

In my chrome inspector I have this :

background-color: attr(data-color color); 
/!\ Invalid property value

I don't understand why... ???

Thanks for your help :)

7 Answers 7

67

You can pass css values from html:

<button style="
    --tooltip-string: 'Ug. Tooltips.';
    --tooltip-color: #f06d06;
    --tooltip-font-size: 11px;
    --tooltip-top: -10px">
  Button
</button>

to css:

button::after {
  content: var(--tooltip-string);
  color: var(--tooltip-color);
  font-size: var(--tooltip-font-size);
}

source: https://css-tricks.com/css-attr-function-got-nothin-custom-properties/ codepen: https://codepen.io/chriscoyier/pen/EbxVME

3
  • 4
    Neat solution, here is browser support for that caniuse.com/#search=css%20v
    – nacholibre
    May 12, 2020 at 9:52
  • 1
    This is great. The var is inherited by child elements too which is extra-awesome!
    – cronoklee
    Dec 26, 2020 at 18:27
  • You make my day!
    – Ledadu
    Jan 31, 2022 at 16:36
51

Always a good idea to read the documentation: https://developer.mozilla.org/en/docs/Web/CSS/attr

screenshot of support table

Surprise! If nothing supports it, then it won't work ;)

Alternative: If you know you only have a limited range of colours, try:

[data-color=red] {background-color:red !important}
[data-color=blue] {background-color:blue !important}
[data-color=zophan-blue] {background-color:#33ccff !important}

As you can see, this allows flexibility, such as defining your own colours ;)

7
  • s***... it's to bad... no other possibility to do that ? with less ? (but without jquery)
    – Zagloo
    Dec 17, 2014 at 15:51
  • 4
    You mean other than style="background-color:#123456;"? Dec 17, 2014 at 15:52
  • @Zagloo: With Less you can use loops to avoid repetition of code but the compiled CSS would still have to be the same way as mentioned above.
    – Harry
    Dec 17, 2014 at 15:59
  • 2
    3 years later, still no support :p
    – nodws
    Jun 7, 2017 at 16:06
  • Same it still doesnt support , sad when we have to theme the sites dynamically!
    – Dpk_Gopi
    Oct 23, 2017 at 11:56
28

If you are talking only about colors, you can use currentColor value as a proxy.

For example:

HTML

<td>
   <span class="bgborder" style="color: #e7663f"></span>
   <i class="fa fa-copy"></i>
</td>

CSS

.bgborder {
  background-color: currentColor;
}
0
6

Currently, the CSS attr function can only be used with the content property in browsers

See here for compatibility

Per the CSS2 spec:

Limited to the content property

CSS3 will extend this (proposal)

..can be used on all properties; may return other values than <string>

3

I guess that you are looking is CSS variables and you can use at Chrome, Firefox and Safari. Check the browser support at Can I use

And can see more at the video from Lea Verou

2

alternately a very handy bit of javascript:

<P _my_colour="red" >one</P>
<P _my_colour="blue">two</P>
<P _my_colour="green">three</P>
<script>
    var my_col = document.querySelectorAll("[_my_colour]");
      my_col.forEach(element => {
        element.style.color = element.getAttribute("_my_colour");
    })

</script>

The css solutions outlined by other contributors are generally better and simpler, so a JS solution is somewhat reinventing the wheel, but does do explicitly what you want in the question, so it's here for completeness.

0

Somehow, it's always possible!. Example: Let's define a global variable in css:

:root {
  --theglobalvariable: coral;
}

In Javascript: Let's modify that global variable from javascript, assigning as value, the content of an element's attribute

var root = document.querySelector(':root');
root.style.setProperty('--theglobalvariable', document.getElementById('IdElement').getAttribute('NameOfAttribute'));

Now, in Css let's insert the value of the global variable into the element we want, and enjoy!

.someElement{
    color:var(--theglobalvariable);
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.