CSS - Add Color with a data attribute - attr(data-color color)

Question

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: Proper

Answer 1

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

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 ;)