data属性を使ってCSSでスタイリングする方法

CSS

data属性、便利ですよねー。
好きな属性を付与してJavaScriptでこねくり回すことができるなんて素敵、ラブ。
そんなdata属性を持つ要素をCSSでスタイリングしたいなぁ、というケースって結構あると思います。
今回はそんな時に便利なCSSのTipsを紹介します。

data属性をCSSセレクタに使うメリット

え、class使えばいいんじゃない?という疑問がよぎると思いますが、data属性を使うことで次のようなメリットがあるのです。

  1. 他のclassと衝突しない。
    複数のメンバーで同時作業している時なんかに便利です。
  2. 無闇にクラスを増やさずに済む。
    data属性の値によってスタイルを個別に指定したい場合に、クラスを増やさずに実現できます。
  3. Javascriptと組み合わせることができる。
    例えばJavaScriptでdata属性を追加したり、data属性の値を変更したりした時にも、CSSでスタイリングすることができます。
     

同じdata属性のある要素を一括指定

以下のようなHTMLで「data-drink」「data-movie」というdata属性別で指定したい時。

<HTML>
<ul>
  <li class="item" data-drink="juice">ジュース</li>
  <li class="item" data-drink="sake">お酒</li>
  <li class="item" data-drink>カレー</li>
  <li class="item" data-movie="mystery">ミステリー</li>
  <li class="item" data-movie="love">恋愛</li>
  <li class="item" data-movie>SF</li>
</ul>
<CSS>
[data-drink] {
  color: blue;
}
[data-movie] {
  color: red;
}

ちなみに「カレー」や「SF」のように、data属性の値を設定していなくても効きます。

<出力結果>

data属性の値を使ったCSS指定方法

以下のようなHTMLで「data-drink」の属性値が「sake」である要素を指定したい時。

<HTML>
<ul>
  <li class="item" data-drink="juice">ジュース</li>
  <li class="item" data-drink="sake">お酒</li>
  <li class="item" data-drink>カレー</li>
  <li class="item" data-movie="mystery">ミステリー</li>
  <li class="item" data-movie="love">恋愛</li>
  <li class="item" data-movie>SF</li>
</ul>
<CSS>
[data-drink="sake"] {
  background-color: pink;
}
<出力結果>

属性値を擬似要素の「content」に使うこともできる!

これとっても便利。
例えば要素を増やさずにサブタイトル的なものがサクッとできちゃったりします。

<HTML>
<ul>
  <li class="item" data-drink="ジュース">グレープフルーツ・オレンジ・アップル</li>
  <li class="item" data-drink="アルコール">日本酒・ビール・ワイン</li>
</ul>
<CSS>
.item {
  position: relative;
  display: block;
  margin-top: 40px;
  margin-left: 50px;
}

[data-drink]:before {
  position: absolute;
  content: attr(data-drink);
  top: -1.5em;
  left: -30px;
  font-size: 14px;
  transform: translateX(-50%);
  color: #333;
  background-color: #fef034;
  padding: 0 1em;
  width: 100px;
}

[data-drink='アルコール']:before {
 color: #ff0000;
}
<出力結果>


いや〜、便利ですね。
JavaScriptとの連携ができるところがなんともオイシイ奴です。

タイトルとURLをコピーしました