【入門編】属性セレクタ ([attr|=value]) – CSS実践ガイド

こんにちは！Webの世界へようこそ。フロントエンドの現場で長年CSSと格闘してきた私から、今日は少しマニアックだけど、知っていると「おっ、デキるな」と思われる魔法のようなセレクタを紹介します。

その名は属性セレクタ `[attr|=value]`。

「なんだか記号だらけで難しそう…」と思いましたか？大丈夫、全然そんなことはありません。一緒に紐解いていきましょう。

—

属性セレクタ `[attr|=value]` って何もの？

CSSで要素を指定するとき、私たちは普段 `class=”button”` のようにクラス名を使いますよね。でも、たまに「クラス名はバラバラだけど、特定のルールで名前がついているものだけ一気にデザインしたい！」という場面に出くわします。

この `[attr|=value]` は、「その属性値が指定した言葉で始まっているか、あるいはハイフン（-）で区切られた最初の言葉がそれであるもの」をピンポイントで捕まえるための「網」なんです。

わかりやすい例え：図書館の棚卸し

想像してみてください。あなたは巨大な図書館で、本のラベル（属性）を見て整理整頓を任された係員です。

ラベルが `lang=”en”` と書かれた本
ラベルが `lang=”en-US”` と書かれた本
ラベルが `lang=”en-GB”` と書かれた本

これらは全部「英語（en）」に関連する本ですよね。
ここで、`[lang|=”en”]` という魔法の網を投げると、これらすべてをまとめて「はい、君たちは英語エリアね！」と一括で指定できるんです。逆に、`lang=”fr”` などのフランス語は、この網には引っかかりません。

—

実践コードで見てみよう

言葉だけだと少し硬いので、実際にコードを書いてみましょう。例えば、Webサイトで「言語ごとのアイコン」を表示させたいときなどに重宝します。

なぜこれが便利なの？

もしこれをクラス名だけでやろうとすると、すべてのボタンに `class=”lang-en”` とか `class=”lang-en-us”` を全部に書いて回らないといけません。でも、属性セレクタを使えば、HTML側の構造さえ整っていれば、CSSから外側から「よしなに」スタイルを当てられるんです。これぞ、保守性の高いコードを書くための第一歩です。

—

つまずきやすいポイント：普通の「〜で始まる」と何が違うの？

ここが一番の迷いどころです。実はCSSには `[attr^=”value”]` （ハット記号）という似た機能もあります。でも、この `|=`（パイプ記号）には特別な性格があるんです。

`[attr^=”en”]`（ハット記号）: とにかく「en」で始まれば何でもOK。`enApple` でも `en-US` でも `en123` でも全部引っかかる「大雑把な網」。
`[attr|=”en”]`（パイプ記号）: 「en」そのものか、「en-」までがワンセット。つまり、単語として独立しているか、ハイフンで繋がっているものだけを正確に拾う「丁寧な網」。

現場では、言語コード（`en-US` など）を扱うときのように、「単語の境界を意識したい」という時にこのパイプ記号が圧倒的に信頼されるんです。

—

最後に：怖がらずに使ってみて！

最初は「こんな特殊なセレクタ、いつ使うの？」と思うかもしれません。でも、Web制作が少し進んで、多言語対応のサイトを作ったり、複雑なシステムを組んだりするときに、このセレクタは必ずあなたの助けになります。

「あ、これハイフンで繋がった名前のグループだ！よし、属性セレクタで一網打尽にしよう」

そうやって、CSSでパズルを解くようにスタイリングを楽しめるようになったら、もうあなたは立派なフロントエンドの仲間入りです。

もしコードがうまく動かなくても、それは「間違い」ではなく「新しい発見」です。ブラウザの検証ツールを開いて、一つひとつ確かめてみてください。応援していますよ！