Dynamically style HTML elements with element's attribute no Javascript

Question

Is something like this possible?

div[id^=red]:hover {
        color: (/red/);
    }

<div id="red"></div>

This is not possible. CSS does have an attr() function which can access the element's attributes, however you can only use it to affect the content property of a before/after pseudo element. — Eric Guan
– Eric Guan, Commented Mar 16, 2016 at 3:19
do you know if there is a way to do this with the html bgcolor attribute? I'm trying to do a hover-over-image-overlay effect. Is there a way to work with the opacity? — merhoo
– merhoo, Commented Mar 16, 2016 at 3:47

xpy · Accepted Answer · 2016-03-20 21:55:34Z

You can't do this with CSS only, but if you can edit the HTML there are workarounds.

The first option is to add a class that represents a color and style it accordingly, this is not very efficient, but it does the job. Of course, it wont work if your colors are dynamic:

div {
  width: 100px;
  height: 100px;
  background: grey;
}
.red:hover {
  background: red;
}
.blue:hover {
  background: blue;
}
.green:hover {
  background: green;
}

<div class="red"></div>
<div class="blue"></div>
<div class="green"></div>

Another tricky solution, since you plan to use :hover, is to set the color and override it on the idle state:

div {
  width: 100px;
  height: 100px;
}
div:not(:hover) {
  background: grey !important;
}

<div style="background: red;"></div>
<div style="background: blue;"></div>
<div style="background: #fa8732;"></div>
<div style="background: #bb0099;"></div>

Which is more efficient since you can add any color you want in you HTML and you don't have to worry for the CSS.

Of course this will work for any property.

Collectives™ on Stack Overflow

Dynamically style HTML elements with element's attribute no Javascript

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