how to define HTML custom attribute taking multiple values just like class attribute?

Question

I want to know if I am able to define a custom HTML attribute that can take 2 or more values just as the 'CLASS" attribute. For instance, considering I define a "Data-Text" and in css I write:

[data-text=light]{color:white;}
[data-text=bold]{font-weight:bolder;}

Now, can I make a trick that if I write :

<p data-text = "light bold"> something </p>

both commands (font-weight and color) happen for the <p> tag?

Answer 1

it is possible when you use the css "~="

[data-text~=light]{color:white;} [data-text~=bold]{font-weight:bolder;}

this should work just fine.