Possible Duplicate:
CSS selector by style attribute
html:
<div data-family='arial'></div>
in css i want to use this family value. Example:
div{font-family: attr(data-family)}
Family can be any string. How make it work?
Asked
Active
Viewed 248 times
1
Community
- 1
- 1
Valentino Langarosa
- 307
- 1
- 3
- 9
-
You realize that something like this will require really modern browsers? – ThiefMaster Oct 15 '12 at 12:12
-
@ʎǝɔɐɯ ǝlʎʞ: No, it's completely different. – BoltClock Oct 15 '12 at 12:13
-
This won't work in any browser because they currently only support `attr()` for the `content` property, and not others. For now, you'll need to hardcode the value in CSS, or use JavaScript. – BoltClock Oct 15 '12 at 12:15
3 Answers
2
Try this code:
div[data-weight="bold"]{
font-weight: bold;
}
Alessandro Minoccheri
- 35,521
- 22
- 122
- 171
-
-
-
But still, attribute value is hardcoded here.. I doubt it's what OP wanted. – Michal Klouda Oct 15 '12 at 12:23
-
@Michal Klouda: Exactly, but there really isn't any other way. See my comment on the question. – BoltClock Oct 15 '12 at 12:25
-
-
@BoltClock I was just wondering why this was upvoted while not giving answer and I ended up downvoted ;) – Michal Klouda Oct 15 '12 at 12:32
0
You cannot achieve what you ask about in pure CSS. Using jQuery it could be done this way:
$.each($('div'), function(i, div) {
$.each($(this).data(), function(key, val) {
var realKey = key.replace(/([A-Z]{1})/g, '-$1').toLowerCase();
$(div).css(realKey, val);
})
})
Check this DEMO.
Michal Klouda
- 14,263
- 7
- 53
- 77
0
You can use the following:
div[data-weight="bold"] { font-weight: bold; }
But I don't believe there's any way to use an attribute as a property without some JavaScript
Fluidbyte
- 5,162
- 9
- 47
- 76