HTML5から「独自データ属性」または「カスタムデータ属性」と呼ばれる新しい仕様が追加されました。
この機能により、任意のhtmlの要素に接頭語「data-」で始まる属性値を付与することで、プライベートな値を設定できるようになりました。

一例として以下のようなHTMLが記述できるようになっています。

<ul>
	<li data-list="first">第１のリスト</li>
	<li data-list="second">第２のリスト</li>
	<li data-list="third">第３のリスト</li>
</ul>

ここでは仮に「data-list」という独自データ属性を付与し、それぞれのリストに個別の値を設定しています。

さて。上記のHTMLコードにCSSを指定する場合、通常であれば「li:nth-child(1)」などとしてスタイルを設定していくことになりますが、今回は独自データ属性に直接CSSを効かせる方法を紹介します。

先のHTMLのリストに順にCSSを充てる場合、以下のように記述します。

ul li[data-list="first"]  {color:#c00;}

ul li[data-list="second"] {color:#0c0;}

ul li[data-list="third"]  {color:#00c;}

実際にCSSを指定したサンプルサイトも用意したので、合わせてご覧ください。

サンプル：HTML5の独自データ属性にCSSを効かせる方法