Multiple css rules for an html node -
can please me css syntax having multiple css rules html node data attributes.
here code work:
<html> <head> </head> <div class='css_rule_red css_rule_size'> test text </div> <style>.css_rule_red { color: red; } .css_rule_size { font-size: 500px; } </style> </html> here current code:
<html> <head> </head> <div data-custom-css='css_rule_red css_rule_size'> test text </div> <style>[data-custom-css='css_rule_red'] { color: red; } [data-custom-css='css_rule_size'] { font-size: 500px; } </style> </html> both 'css_rule_red' , 'css_rule_size' work individually, however, above code not display either of 'css_rule_red' or 'css_rule_size' css rules when combined together.
how possible have multiple css rules, when using data attributes?
more info attribute selectors - https://developer.mozilla.org/en-us/docs/web/css/attribute_selectors
[data-custom-css~="css_rule_red"] { color: red; } [data-custom-css~="css_rule_size"] { font-size: 500px; } 
Comments
Post a Comment