【入門編】属性値リストセレクタ [attr~=val] – CSS実践ガイド

CSSの世界へようこそ！フロントエンドの最前線で日々コードを書いている私から、今日は少しだけ「通」な、でも知っていると明日から劇的にCSSが書きやすくなるテクニックをお話ししますね。

今回お伝えするのは、属性値リストセレクタ `[attr~=val]` という、名前を聞いただけではちょっと身構えてしまうような存在です。でも、安心してください。仕組みさえ分かれば、これほど頼りになる相棒はいません。

—

属性値リストセレクタって、どんなもの？

まず、「属性値リスト」を想像してみてください。例えば、とあるWebサイトで「おすすめタグ」を設定している場面を思い浮かべましょう。

「この商品は、【セール中】【送料無料】【人気】という3つのラベルがついている」

HTMLで書くと、こんな感じになることが多いですよね。
`

ここで、もしあなたが「`sale`（セール中）というラベルがついている商品だけを、真っ赤な枠線で囲んで目立たせたい！」と思ったらどうしますか？

普通なら `class=”sale”` を追加するかもしれませんが、もしHTML側のクラス名を自由にいじれない状況だったら……？そこで登場するのが、この `[data-labels~=”sale”]` という魔法の杖です。

「~=」は「仲間入りしているか？」を確認するサイン

このセレクタのポイントは、`~=` という記号です。これは「空白（スペース）で区切られたリストの中に、その値が含まれているか？」を判定してくれるものなんです。

`[data-labels=”sale”]` と書くと：「`data-labels` の中身が完全に『sale』じゃないとダメ！」と厳しく判定します。
`[data-labels~=”sale”]` と書くと：「`sale` という単語が、どこかに混ざっていればOK！」と優しく判定してくれます。

まるで、大きなカゴの中にリンゴやミカンが入っていて、「その中にリンゴはある？」と探すようなイメージですね。

—

実践コードで動きを見てみよう

実際にエディタに貼り付けて、動きを確認してみてください。

セール中商品

通常商品

人気セール商品

—

なぜこのセレクタが「現場」で重宝されるのか

「別にクラスを追加すればいいじゃん」と思った方もいるかもしれません。でも、現場では「HTMLを直接触ると、他のプログラムが動かなくなる」とか「CMSから出力されるHTMLが固定されている」といった、ままならない状況が山ほどあります。

そんな時、この属性セレクタはまさに「縁の下の力持ち」です。

つまずきやすいポイント：ここだけ気をつけて！

よくある間違いが、`=` と `~=` を混同してしまうこと。

`=` は「一致」：名前が完全に一緒じゃないと反応しません。
`~=` は「包含」：スペース区切りの単語を探すので、「sale」という名前のクラスの一部に「sales」という単語が含まれていても反応しません。

例えば、`data-labels=”sales”` と書いても、`[data-labels~=”sale”]` は反応しません。「sale」という独立した単語を探しているからです。これ、最初によく引っかかるポイントなので、もし動かないときは「スペースで区切られているかな？」と確認してみてくださいね。

—

最後に：CSSは「宝探し」のようなもの

CSSのセレクタを覚えることは、HTMLという宝の山から、狙った要素をピンポイントで掘り出すテクニックを磨くことです。

`[attr~=val]` は、一見地味ですが、Webサイトに柔軟なルールを持たせるためのとても賢い手段です。HTMLを汚さずに、CSSだけで「状態」を制御できる。これぞ、ベテランが好んで使う「スマートな設計」への第一歩です。

難しく考えすぎなくて大丈夫。まずは今日、適当な要素に `data-test=”apple banana”` なんて属性を書いて、CSSで遊んでみてください。「おっ、反応した！」という小さな感動が、あなたのフロントエンド・ライフをより楽しくしてくれるはずですよ。

また分からないことがあったら、いつでも聞いてくださいね。一緒に一つずつ解き明かしていきましょう！