Can CSS be used to target user definded attributes in HTML tags?

Question

I have a lot of divs with attributes and values.

My question is can I target these divs using CSS for styling purposes?

That way I can create CSS classes for styling and have javascript for adding functionality on the page. Otherwise I need to create CSS classes and attributes individually.

An additional point - I'm doing this so that the site degrades gracefully. So when javascript is not available, the styling is not affected. At the same time javascript, when present, can provide for a richer experience.

Answer 1

Yes, absolutely.

div[attr~=value]

Read more about CSS selectors. Doesn’t have to work in IE ;)

Answer 2

Theoretically the answer is yes as Maciej points out.

In real world practice the answer is "it depends".

Later versions of CSS include means of selecting elements by arbitary attributes (BTW in your question when you used the word "class" you meant "selector" right?) and even more recently some browsers have got round to implementing that part of CSS.

So if your audience consists mainly of people using browsers supporting this feature and you can code your site to degrade gracefully for those that don't then the answer remains yes. Since IE7/6 (I don't know about 8) doesn't support this, we are talking about a non-public audience that can be persuaded/coerced not to use IE. A tall order.

Is there a reason the standard use of the class attribute doesn't cut it for you?

Since this problem involves the use of javascript perhaps JQuery (which can select using arbitary attributes in most browsers) may be a solution for you.