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?

try this visit link

Aing Macan
– Aing Macan

2021-02-24 22:20:52 +00:00
Commented Feb 24, 2021 at 22:20 — Aing Macan
– Aing Macan, Commented Feb 24, 2021 at 22:20

Tiamiyu Samad · Accepted Answer · 2021-02-24 22:05:24Z

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.

answered Feb 24, 2021 at 22:05

Tiamiyu Samad

264 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related