attr as property in css selector [duplicate]

Question

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?

Answer 1

Try this code:

 div[data-weight="bold"]{
      font-weight: bold;
    }

http://www.w3.org/TR/selectors/#attribute-selectors

JSFIDDLE

Answer 2

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

Answer 3

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.