【入門編】ハイフン区切りプレフィックス [attr|=value] – CSS実践ガイド

こんにちは！フロントエンドの現場を長年歩んできたシニアアーキテクトの私です。

CSSを書き始めてしばらく経つと、「あれ、この要素だけにいい感じにスタイルを当てたいのに、クラス名がごちゃごちゃしててうまく狙い撃ちできない…！」なんて壁にぶつかること、ありませんか？大丈夫ですよ、誰もが通る道です。

今回は、そんなCSSのちょっとマニアックだけど実はめちゃくちゃ頼りになる秘密兵器、ハイフン区切りプレフィックス `[attr|=value]` について、おしゃべりするような気持ちで優しく紐解いていきますね。

—

いきなり暗号みたいなコードが出てきて身構えちゃいましたよね。でも、安心してください。これ、私たちの日常生活でよく見かける「言語コードや、お名前の苗字」みたいなものなんです。

例えば、海外のサイトや多言語対応のサイトを見ているとき、HTMLのタグにこんな書き方を見かけたことはありませんか？

ここで登場するのが、今回の主役である `[lang|=”en”]` というセレクタです。

この子は、「`en` という文字そのもの」、または「`en-`（enのあとにハイフンが続くもの）」で始まる要素を、ぜーんぶまとめて見つけてくれるお利口さんなんです。

お買い物に例えるなら、「『おもちゃ』というジャンルの商品」と、「『おもちゃ-ブロック』『おもちゃ-人形』みたいな、ハイフンで枝分かれしたシリーズ商品」を、ひと網打尽にゲットしちゃうような感覚ですね！

—

百聞は一見にしかず。実際にどんな風に動くのか、エディタにそのまま貼り付けて試せるコードを見てみましょう。

今回は、ボタンのデザインを言語ごとにちょっと変えてみるというシチュエーションを想像してください。

[|=] セレクタの実験場

ボタンの言語設定テスト

このコードをブラウザで開いてみてください。
「標準の英語」「アメリカ英語」「イギリス英語」のボタンだけが、綺麗な青色に染まったはずです。

一方で、コッソリ混ぜておいた `en_CA`（アンダースコア区切り）や `ja`（日本語）のボタンは、見事にスルーされていますよね。ここがこのセレクタの、ちょっと厳格で可愛いこだわりポイントなんです。

—

現場でCSSを書いていて、初心者の頃に私もよくやってしまった「つまずきポイント」をこっそりシェアしますね。

CSSには、文字通り「〜で始まる」を探す `[attr^=”value”]` というセレクタも存在します。

じゃあ何が違うの？って思いますよね。

`[attr^=”value”]` は、文字通り「前方一致」のストーカー気質。後ろが何であれ、その文字で始まっていればキャッチします（例: `england` も引っかかる）。
今回の `[attr|=value]` は、もっとお堅くてルールに厳しいお巡さん。「指定した単語そのもの」か、「ハイフンで区切られた直後の単語」しか認めません。言語コード（`lang`）のように厳密に区切りたい場面のために生まれてきたセレクタなんです。

先ほどのサンプルでも触れましたが、`en_US` のようにアンダースコア（`_`）を使ったり、スペースで区切ったりしても、このセレクタは反応してくれません。「あ、ハイフンじゃないからダメだな」と冷たく無視されてしまいます。
HTMLを書くときは、ちゃんとハイフン `-` を使ってあげてくださいね。

—

いかがでしたでしょうか？
`[attr|=value]` なんて、普段のコーディングではめったに見かけないマイナーな存在に見えるかもしれません。実際、私も毎日のように使うわけではありません。

だけど、多言語サイトの構築や、BEMなどの命名規則をちょっと応用したコンポーネント設計など、「ここぞ！」という場面に出くわしたとき、このセレクタを知っているだけでコードが驚くほどスッキリ美しくなります。

CSSは、こうした小さな「引き出し」の積み重ねです。
最初は「こんなマニアックな書き方、覚えられるかな…」と不安になるかもしれませんが、焦る必要は全くありません。必要なときにこのブログをまた開いて、「あぁ、そういえばそんな奴いたな」と思い出してもらえたら、それだけで満点です。

あなたの毎日のコーディングが、少しでも楽しく、ワクワクするものでありますように。それでは、また別の現場の知恵でお会いしましょう！