4 ms·
Cool! What is the syntax for that?
by vaylian 3y ago
Cool! What is the syntax for that?
- domgor 3y agoAttributes can be used in selectors like this `div[data-my-data="stuff"]`.
- wildrhythms 3y agoCSS is very powerful here because you can take advantage of the other attribute selectors to find partial matches: div[data-my-data^="my-prefix"] (selects by prefix) div[data-my-data$="my-suffix"] (selects by suffix) div[data-my-data*="my-substring"] (selects by substring) Quite a few more of these: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors#syntax https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_s...
- LorenzA 3y agoattr() can also be used to some degree https://developer.mozilla.org/en-US/docs/Web/CSS/attr https://developer.mozilla.org/en-US/docs/Web/CSS/attr
- runarberg 3y agoThe attr() function is actually much more powerful in the spec (perhaps one of my favorite part of unimplemented CSS). According to the spec you can supply the type of the function and use it as value (not just content as of now): <div data-background="lime">Red (but could be lime)</div> div { background: red; } div[data-background] { background: attr(data-background color, red); } So according to the spec, you should be able to control the sizes, color, and even animation timings with (non-style) attributes. In reality though, whenever I think I need this advanced attr() function, I usually just solve the issue using Custom Properties on the `style` attribute: <div style="--background: lime">