CSS Values Using HTML5 Data Attribute

CSS values using HTML5 data attribute

There is, indeed, prevision for such feature, look http://www.w3.org/TR/css3-values/#attr-notation

This fiddle should work like what you need, but will not for now.

Unfortunately, it's still a draft, and isn't fully implemented on major browsers.

It does work for content on pseudo-elements, though.

What is the purpose of storing custom data on HTML data attributes?

One use case I currently used was I created a component in react and used pseudo elements to take data from data attribute ie. data-title value will be taken by CSS in content: attr(data-title) so what ever value I am passing to component shows directly via css and also there are so many use cases for eg you need some value to be instead of passing whole object on click function you just add click event and it will take values from data attributes instead.

These two use cases I can think of rite now.

----------- UPDATE ---------------

data-* attributes allow us to store extra information on standard, semantic HTML elements without other hacks such as non-standard attributes, or extra properties on DOM, hacks can make your HTML invalid in many cases or create unknown bugs. Common attributes that we use are class, id etc and for custom attributes you can use data-*. The main motivation behind introduction of data attribute is to allow us to store extra information on standard, semantic HTML elements without other hacks such as non-standard attributes, or extra properties on DOM. So when you ask what's better approach you, all you can think about is there are multiple ways to achieve same thing and it's subjective to developer to take approch.

Display data attribute value with CSS

You can do this by hiding the th content's visibility, and replacing it using CSS' content and attr:

[data-day-abbr]:before {  content: attr(data-day-abbr);  visibility: visible;}
th {  visibility: hidden;}

<table>  <tr>    <th id="tribe-events-monday" title="Monday" data-day-abbr="Mon">Monday</th>  </tr></table>

HTML5 data attribute vs value?

Well, value is not a standard attribute for a div element so your html is not valid. If you want to honor html5 specification, you'll have to use data- attributes.

So in short: data- attributes is valid in html5 while your value approach is invalid on all html versions.

How can I set a data attribute on an element?

EDIT: as isherwood mentioned in the comments. This answer is just javascript solution and not specific for reactjs as I missed that question had reactjs tag. See recommended answer How do I dynamically set HTML5 data- attributes using react? for better solution!

You probably looking for html data attribute

<div class="container">
    <div data-your-prop="1" />
    <div data-your-prop="1.5" />
    <div data-your-prop="2" />
<div>

e.g. 1

const divs = document.querySelectorAll('.container div[data-your-prop]')

divs.forEach(function (el, index) {
    console.log(el.dataset.yourProp)
})

e.g. 2

const divs = document.querySelectorAll('.container div[data-your-prop]')

let totalInt = 0
let totalFloat = 0
divs.forEach(function (el, index) {
    totalInt += parseInt(el.dataset.yourProp)
    totalFloat += parseFloat(el.dataset.yourProp)
});

console.log(totalInt)
console.log(totalFloat.toFixed(2))

// yields
//
// 4
// "4.50"

note

(data-) attribute names are attached to el.dataset and names defined in dom are normalized to be valid json property.

CSS Values Using HTML5 Data Attribute