classやid以外で要素を指定する方法として、data属性を使うやり方があるのをご存じですか？
classやidと衝突せずに要素を指定しスタイルを当てたりすることができるので是非活用してください。
目次
data属性とは
data属性とは、data-rubyやdata-content、data-colorなどの名前をつけた属性をhtmlタグの中に設置したもののことを指します。具体的には下記のような感じ。
<p data-content="abc">abc</p>こちらのコードを見てわかるように、
classもidもないですよね。でも代わりにdata-contentという属性（attribute）が用意されています。
このdata-○○がいわゆる「data属性」と呼ばれるもので、これを指定することでCSSやJSから操作することが可能です。
また、data属性以外にもhrefなどの属性をつかってCSS上書きなどが可能なので、次のセクションで実例を交えて３パターン紹介します。
属性をつかった具体例を３つ紹介
動作サンプルはこちら
See the Pen data-attribute by yukiwebcreate (@Yukiwebcreate) on CodePen.
１つ目はdata-contentを指定してCSSで色を変えています。
２つ目はhref属性を使ってCSSでスタイルを変えています。
３つ目はJSでの操作を行っています。
まとめ
dataやhref属性を使用することでclassやid以外をキーとしてCSSやJSによる操作が可能になります。
他人からのコードを引き継いだけどCSS衝突しちゃってるし、でもclassとか書き換えたくないしなあ・・・。みたいな微妙な状況とかに役立ったりします。
他にも使い方はいろいろとあるので試してみてくださいね。
なるほどな
