こんにちは！フロントエンドの現場を長年フラフラと……もとい、渡り歩いてきたチーフアーキテクトの私です。
CSSを書き始めた頃って、セレクタの多さにめまいがしませんか？「クラス名」「ID」「子孫セレクタ」……。それに加えて、なんだか難しそうな名前の「属性セレクタ」や「疑似クラス」が登場すると、「もう無理！」とそっとブラウザのタブを閉じたくなる気持ち、痛いほどよく分かります。
でも、大丈夫ですよ。今日お話しする「前方一致（`[attr^=value]`）」は、身の回りのちょっとした「仕分けのコツ」さえ分かってしまえば、あなたのコーディングライフを劇的にラクにしてくれる魔法の杖になります。
一緒にゆっくり、優しく紐解いていきましょう！
—
そもそも「属性セレクタ」ってなに？ お買い物の「タグ」で考えてみよう
CSSでデザインをするとき、私たちは通常、HTMLのタグに `class=”button”` のような「目印（クラス名）」をつけて、「この目印の人、こっちに集合！」と指示を出しますよね。
でも、HTMLにはクラス名以外にも、たくさんの「属性（中身のデータみたいなもの）」が存在します。例えば、リンクタグの `href` や、画像の場所を示す `src` などです。
属性セレクタというのは、「わざわざ新しいクラス名を追加しなくても、HTMLが最初から持っている属性のヒントを読み取って、ピンポイントでおしゃれにしちゃおうぜ！」という、とても賢い機能なんです。
前方一致 `[attr^=value]` のイメージ
今回フォーカスする 前方一致（`[attr^=value]`） は、その属性の値が「特定の文字で始まっている」ものを狙い撃ちするセレクタです。
これ、何かに似ていませんか？
そう、スーパーのレジや、郵便番号の仕分け箱のようなものです。
「『100-』から始まる郵便番号の封筒は、全部こちらのカゴにまとめてください！」
「『https://』から始まるURLのリンクには、ぜんぶ外れ矢印のアイコンをつけちゃいましょう！」
この「〜から始まる（前方）」という条件だけを見つけるのが、前方一致の `^=` （ハットイコール）という記号なのです。
—
実際のコードで見てみよう！「外部リンク」にアイコンをつけるお仕事
百聞は一見にしかず。現場で本当によく使う「外部リンク（自分のサイトの外のページに飛ぶリンク）に小さな矢印をつける」という実例で、書き方を見てみましょう。
外部へのリンクは、だいたい `https://` から始まりますよね。そこを前方一致で捕まえてみます。
さあ、ここにCSSをあてていきますよ。
/
[href^=”https://”] の読み方：
「href属性の値が、”https://” という文字で始まっている タグ を選んでね！」
/
a[href^=”https://”] {
/ 目印として、文字の色をちょっと爽やかな青緑色にする /
color: #008080;
/ 外部サイトだと分かりやすいように、右側にちょっとした余白を作るよ /
padding-right: 1.2em;
/ デモとして分かりやすく、後ろに「↗」の文字を擬似要素で足してみるね /
position: relative;
}
a[href^=”https://”]::after {
content: “↗”;
position: absolute;
right: 0;
font-size: 0.8em;
}
このコードをブラウザで見ると、`https://` から始まるリンクだけに、自動的に「↗」のマークが付きます。
「わざわざすべての外部リンクに `class=”external”` って手動で書き込むの、めんどくさいな……」という心の叫びを、この前方一致セレクタがスマートに解決してくれるんです。
—
初学者がつまずきやすいポイントと「優しいフォロー」
前方一致を使い始めるとき、みんなが「あれ？」っとつまずきやすいポイントがいくつかあります。ここで事前に予防線を張っておきましょうね。
1. 記号の書き順、忘れちゃいそう！
`[attr^=value]` の `^=` ですが、「えっと、ハットが先だっけ？イコールが先だっけ？」と混乱しがちです。
そんなときは、「山（^）を登ってから、イコール（=）で着地する」と覚えてみてください。
数学の「べき乗（累乗）」で `^` を使ったことがある人は、「あ、あの上のほうのやつね！」と思い出せるはずです。
2. ダブルクォーテーション（””）は必要なの？
値の部分（上の例だと `”https://”`）は、クォーテーションで囲んでも、囲まなくても動くことが多いです。でも、URLの中に特殊な文字が入ったりするとバグの原因になるので、基本的にはダブルクォーテーションで囲む癖をつけておくのが安全でプロっぽいですよ。
3. 「前方」だから、途中に含まれていてもダメ？
そうです！「前方一致」という名前の通り、「一番はじめ（先頭）」になければいけません。
例えば、`href=”foo/https://bar.com”` のように、途中に `https://` が紛れ込んでいても、先頭が `foo/` なのでこのセレクタは反応しません。あくまで「ここからスタートしていること」が条件になります。
—
実務ではどんなところで使われているの？
「へえ、便利そうだけど、実際の現場ではそんなに出番ある？」と思ったそこのあなた。実は、モダンなWeb制作では大活躍しています。
- ファイル形式ごとのアイコン分け
`[href$=”.pdf”]`（これは後方一致ですが親戚です）や、ファイル名のプレフィックス（接頭辞）でデザインを切り替えるとき。
- フォームの入力欄（input要素）のスタイル調整
`[type^=”text”]` のように、テキスト系の入力欄をまとめてスタイリングしたいとき。
- データ属性（data-）の制御
JavaScriptと連携して、`[data-status^=”loading”]` のように、状態の始まりによって見た目をパッと切り替えたいとき。
特に、CMS（WordPressなど）を使っていて、ユーザーが自由に書いた記事の中にあるリンクを自動制御したいときなどには、前方一致セレクタは本当に頼れる相棒になってくれます。
—
最後に：CSSは、あなたの「めんどくさい」を救うためにある
CSSのルールや記号を見ていると、「覚えることが多すぎてパンクしそう……」と気が滅入ってしまうこともあるでしょう。
でも、CSSの設計やセレクタの仕組みは、すべて「いかに人間の手作業を減らし、ラクをして綺麗でメンテナンスしやすいWebサイトを作るか」という先人たちの知恵と優しさの結晶です。
今日覚えた前方一致 `[attr^=value]` も、「全部にクラス名をつけるの、めんどくさい！」という素朴な面倒くささを解消するために生まれてきました。
まずはご自身のローカル環境で、適当なリンクをいくつか並べて、`a[href^=”http”]` と書いて遊んでみてください。「おっ、狙ったやつだけに効いた！」という小さな感動の積み重ねが、気づけばあなたを一人前のフロントエンド使いにしてくれますよ。
それでは、また次のCSSの冒険でお会いしましょう！あなたのコーディングの旅が、心地よいものでありますように。
コメント