CSSの世界へようこそ！フロントエンドの最前線でコードを書いていると、「あ、これもっとスマートに書けるはずだ」と気づく瞬間が何度もあります。
今日は、CSSのセレクタの中でも、ちょっと通好みだけど知っていると鼻が高い、「ハイフンリストセレクタ `[attr|=val]`」についてお話しします。名前だけ聞くと難しそうですよね。でも、身近な例えで紐解けば、実はすごく頼りになる相棒なんです。
—
「ハイフンリストセレクタ」って何者？
CSSで「特定の名前がついた要素だけ色を変えたいな」と思ったとき、普通はクラス名を使いますよね。でも、たまにこんな状況に出くわしませんか？
「言語コード（ja, en-US, en-GBなど）によってデザインを少し変えたい」とか、「商品コードのプレフィックスで管理している」といったケースです。
ここで登場するのが `[lang|=en]` のような書き方。これが属性値ハイフンリストセレクタです。
どんな動きをするの？
このセレクタは、以下の2つのルールで要素をキャッチします。
1. その値と完全に一致する（例：`en`）
2. その値で始まり、直後にハイフンが来る（例：`en-US` や `en-GB`）
つまり、「そのグループの一員であるか」を判定するフィルターのようなものなんです。
—
たとえば「メニューのアイコン」で考えてみよう
イメージしてみてください。あなたはカフェのメニュー表を作っています。「ホットコーヒー（coffee-hot）」「アイスコーヒー（coffee-ice）」「コーヒー豆（coffee）」という商品があるとします。
全部「coffee」というグループですが、種類によって少しアイコンの色を変えたい。そんなとき、このセレクタなら一網打尽にできます。
/ data-typeが “coffee” で始まるもの、または “coffee-” で続くものを捕まえる /
[data-type|=”coffee”] {
border-left: 5px solid #6f4e37; / コーヒー色のラインを引く /
padding-left: 10px;
}
なぜこれが便利なの？
もし普通にクラス名だけでやろうとすると、「coffee」「coffee-hot」「coffee-ice」すべてに同じクラスを振るか、CSSで一つずつ書く必要があります。でも、このセレクタを使えば「属性値の頭が合致していれば、ハイフン以降は気にしないよ」という大らかな指定ができるんです。
—
よくある「つまずきポイント」をフォローします
初心者の方が一番迷いやすいのは、「`=`（アスタリスク）」や「`^=`（ハット）」といった、似たようなセレクタとの違いです。
- `[attr^=”val”]`：とにかく「val」で始まれば何でもOK。（ハイフンがあろうがなかろうが無視）
- `[attr|=”val”]`：「val」そのものか、「val-」という塊になっているかを厳密に見る。
「なんでわざわざハイフン限定なの？」と思うかもしれません。これは、「言語コードや名前空間のような、意味のある区切りを正確に扱いたい」というプロの現場のこだわりから生まれたルールなんです。例えば、`en-US` と `en-GB` を選別したいのに、`en1` という名前まで選ばれたら困りますよね。`|=` は、そんな誤爆を防ぐ「慎重派のセレクタ」なんです。
—
現場で使うときのコツ
このセレクタは、「多言語対応サイト」や「複雑なデータ属性で管理されたコンポーネント」を扱うときに真価を発揮します。
例えば、`lang` 属性。
`[lang|=”en”]` と書けば、`en`（英語全般）でも `en-US`（アメリカ英語）でも `en-GB`（イギリス英語）でも、すべてまとめてスタイルを適用できます。これ、一行書くだけで済むので、メンテナンス性が劇的に上がります。
まとめ：怖がらずに使ってみよう！
CSSのセレクタは、最初は呪文のように見えるかもしれません。でも、「どの要素を捕まえたいか」という意図をCSSに伝えるための、ただの「網」です。
今日紹介した `[attr|=val]` は、「グループの頭文字が同じなら、まとめて面倒見てあげるよ」という、ちょっと面倒見の良いセレクタです。ぜひ、次回のコーディングで、似たような名前の属性が並んでいたら思い出してみてください。
コードがすっきり短くなると、開発はもっと楽しくなりますよ。応援しています！
コメント