How do I access the value of a data-attribute and use it in a CSS declaration

Q: How can I access the value of a data-attribute and use it inside the declaration?

data-attribute

Edit: I'm expanding the scope to include Sass.

For example, assume I have the following HTML:

<div class="black box">
<div data-color="green">
This text should be green
</div>

<div data-color="red">
This text should be red
</div>

<div data-color="white">
This text should be white
</div>
</div>


That renders to this:

using the following CSS:

/* Ignore this */
.black.box
background-color: black;



/* Refactor the three rules below into a single rule */
div[data-color="green"]
color: green;


div[data-color="red"]
color: red;


div[data-color="white"]
color: white;



How can I refactor the three repetitive CSS rules into something like this pseudocode:

div[data-color=VALUE]
color: VALUE;



Here's fiddle to help: https://jsfiddle.net/gilani/54de0zn6/7/

1 Answer
1

In this particular case using inline style is one solution since the values are already added inline:

.black
background:black;
font-size:30px;


<div class="black box">
<div style="color:green">
This text should be green
</div>

<div style="color:red">
This text should be red
</div>

<div style="color:white">
This text should be white
</div>
</div>

You can also consider the use of CSS variable for more complex situations (also relying on inline style)

.black
background:black;
font-size:30px;


.black > div
color:var(--c);
border:5px solid var(--c);


<div class="black box">
<div style="--c:green">
This text should be green
</div>

<div style="--c:red">
This text should be red
</div>

<div style="--c:white">
This text should be white
</div>
</div>

data

li

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.