Can we specify custom data attribute values in CSS?

Question

On elements I can specify the data attributes as, e.g.

<div data-widget-type="MyWidgetType1" data-property1="20" data-property2="test">
...
</div>

I want to capture these in a class e.g.

.MyClass1 {
 data-widget-type:"MyWidgetType1";
 data-property1:"20";
 data-property2:"test";
}

<div class="MyClass1">
...
</div>

Is there a way to specify data attribute values in CSS?

Solution 1

CSS is not HTML. You cannot set or change the value of an HTML attribute using CSS.

Besides, why would you do this? HTML and CSS exist because of separation of concerns. HTML is for content and CSS is for presentation. Specifying data attributes in CSS is no different to specifying presentational attributes in HTML.

If you're trying to assign metadata to a class name which then applies to all elements with that class name, that's (again) completely outside of the purview of CSS, and simply not possible in HTML. The only way to assign metadata to an element is to specify it as an attribute on that element. (You can move the attribute declarations to a script if you don't want to specify the attributes on every instance of that class within the markup, but at the end of the day the script still has to populate each element's dataset with those values. Depending on your needs, though, this may be sufficient.)

Solution 2

No, there is no such functionality even for default attributes (like you can't set name attribute via CSS). But you can select these custom attributes:

.MyClass1[data-widget-type="MyWidgetType1"]

Solution 3

It's possible to select a class in css using the [attribute] value, but I don't believe CSS can update that attribute.

https://css-tricks.com/almanac/selectors/a/attribute/

To update the attribute you'd need to find a jQuery solution, or similar.

Edit: In jQuery, you can update the attribute like this:

$("#fieldId").attr("attribute-name","value you want to set");

Comments

[Stephan Muller]

No, that's not possible.

[Mr. Alien]

Not sure how this sets attribute in HTML.

[Justinas]

@Mr.Alien It will not set anything, it's just CSS selector. You can't manipulate DOM elements via CSS

[Mr. Alien]

Yes we cannot, hence answer should be straight NO. I don't think selecting is in questions scope. :)

[Justinas]

@Mr.Alien No, there is no such functionality

[Unixcited]

I want to specify a class to div, but then have entirely different class definition based on media query for browser/ua type.

[BoltClock]

Then you don't want CSS, you want attributes that are controlled by media queries. Those don't exist in HTML either - you will still need a script.

[Unixcited]

Just came across CSS custom properties : w3.org/TR/css-variables. Will see if I can use for the case in question

[BoltClock]

@Nitesh: No, you can't. If custom props were applicable here, I would have said so. Everything I told you last year stands, whether you like it or not (and judging by your reply to Stephan, it seems abundantly clear to me that you're not having any of it, so that's your prerogative).

[Unixcited]

Yes, I found my case wasn't a suitable candidate for CSS custom props. I agree with and understood what you said so solved my problem differently. What I still don't understand is - Whether an extension to CSS, similar to what I was asking, is a good idea or not? Thanks