data-*属性とは

data-*属性は、要素にカスタムデータと呼ばれる、独自の属性を指定する属性です。data-*属性の”*”は、1文字以上の任意の文字列を指定します(” xml “から初めれない、” : “は使用できない、大文字の” A ~ Z “は使用できない)。このdata-*属性は、適切な要素や属性がない場合に、ページに固有の独自データを割り当てる事ができ、CSSやJavaScriptなどにデータを渡す際に役立ちます。

属性値
任意
利用できるバージョン(HTML4.01以降)
HTML5 〜
対応ブラウザ
  • Chrome
  • Firefox
  • Internet Explorer
  • Opera
  • Safari

data-*属性を使ったサンプル

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
HTML5
3.2.5.4 The data-* attribute

関連する属性

関連するレッスン