How to apply CSS rules using attr(data-attribute)?

Question

I'd like to have CSS that uses attr(data-attribute) to apply a CSS-rule.

For example, in my CSS:

@media max-width(480px) {
  .mobile-float {
     float: attr(data-mobile-float);
  }
}

Then, in my HTML, I define the data-attribute:

<div data-mobile-float="right">
  Floats right on mobile!
</div>

<div data-mobile-float="left">
  Floats left on mobile!
</div>

I feel like I'm missing a character and it's not working. How do I do this correctly? Thanks!

score 0 · Answer 1 · answered May 11 '16 at 04:22

0

you are using wrong selector in CSS try this

[data-mobile-float="left"]{font-size: 50px;}

<div data-mobile-float="right">
  Floats right on mobile!
</div>

<div data-mobile-float="left">
  Floats left on mobile!
</div>

answered May 11 '16 at 04:22

Adnan Akram

Thank you for the suggestion, but in your example, you now have to write another CSS rule for `[data-mobile-float="right"]{ ... }`. I have a lot of CSS rules that I'd like to add besides float=left / float=right / @media max-width / @media min-width, and so I'd like to use the `attr()` CSS function to provide the CSS property value. – user3621156 May 11 '16 at 17:37

1 Answers1