data-*属性とは
data-*属性は、要素にカスタムデータと呼ばれる、独自の属性を指定する属性です。data-*属性の”*”は、1文字以上の任意の文字列を指定します(” xml “から初めれない、” : “は使用できない、大文字の” A ~ Z “は使用できない)。このdata-*属性は、適切な要素や属性がない場合に、ページに固有の独自データを割り当てる事ができ、CSSやJavaScriptなどにデータを渡す際に役立ちます。
- 属性値
- 任意
- 利用できるバージョン(HTML4.01以降)
- HTML5 〜
- 対応ブラウザ
-
- Chrome
- Firefox
- Internet Explorer
- Opera
- Safari
data-*属性を使ったサンプル
<ul>
<li data-stock="5">製品A</li>
<li data-stock="3">製品B</li>
<li data-stock="0">製品C</li>
<li data-stock="3">製品D</li>
<li data-stock="0">製品E</li>
</ul>
li[data-stock="0"] {
color: #ccc;
}
RERUN
仕様
- HTML5.1
- 3.2.5.4. The data-* attribute