こんにちは！フロントエンド・アーキテクトの私です。

CSSを書き始めてしばらく経つと、「あ、こういう条件の時だけデザインを変えたいな」という細かいこだわりが出てきますよね。クラス名を追加すれば解決するけれど、HTMLがいっぱいで面倒くさい……そんな時に救世主となるのが「属性セレクタ」です。

今回はその中から、ちょっぴりニッチだけど、知っていると「おっ、やるな！」と周りに一目置かれる後方一致セレクタ `[attr$=value]`について、優しく、そして徹底的に解説していきますね。

大丈夫、難しい専門用語はなるべく使わずに、身近な例えからゆっくり紐解いていきますので、コーヒーでも飲みながらリラックスして読んでいってください。

—

1. 後方一致セレクタ `[attr$=value]` ってなに？

まずは、この呪文のような記号の正体から。

CSSのセレクタは、HTMLの「どの要素をターゲットにするか」を指定する目印ですよね。その中でも属性セレクタは、「タグについているおまけ情報（属性）」を狙い撃ちするスゴ技です。

その中のひとつ、後方一致（こうほういっち）は、文字通り「後ろの終わり方が一致しているもの」を見つけるための機能です。

身近な例え：お名前の「苗字」と「名前」

たとえば、学校のクラス全員のロッカーがあるとします。
「名前の終わり（下の名前）」が全員分違っていたとして、もし「『〜こ』ちゃんで終わる子のロッカーだけ、ピンク色のマグネットを貼りたい！」と思ったとします。

「さくらこ」ちゃん ➔ ◯（「こ」で終わる）
「ゆうこ」ちゃん ➔ ◯（「こ」で終わる）
「たろう」くん ➔ ×（「う」で終わる）

この「後ろが一致している条件」でターゲットを選ぶのが、まさに後方一致の役割なんです。

CSSの書き方としては、こう書きます。

/ 「=」の前に「$」がついていたら、それは「後ろが一致するもの」という意味！ /
[属性名$=”終わりの文字”] {
/ ここにスタイルを書くよ /
}

この「`$`」のマーク、形がなんだか「終わりのラインテープ」に見えませんか？……見えませんか、そうですか（笑）。でも、「文字列のケツ（終わり）を見る記号」と覚えておくと、忘れにくくなりますよ。

—

2. どんな時に使うの？実務でのリアルな出番

「へえ、後ろが一致するんだ。で、いつ使うの？」って思いますよね。
これがですね、実務の現場ではファイルの拡張子を見分けるときにめちゃくちゃ重宝するんです。

例えば、Webサイトを作っていて、色々なダウンロードリンクが並んでいるとしましょう。

会社の資料（PDF）
申込用紙（Word）
計算表（Excel）

ユーザービリティ（使いやすさ）を考えると、リンクの横に「これはPDFファイルですよ」と分かるように、小さなアイコンを自動でつけ親切にしてあげたいですよね。

でも、CMS（WordPressなど）から出力されるリンクに、わざわざ一つひとつ「PDF用のクラス」を振るのって、すごく面倒だし、クライアントが勝手に更新した時に崩れちゃいそう。

そんな時！後方一致セレクタの出番です。

「リンクのURL（`href`属性）が、`.pdf`という文字で終わっていたら、PDF用のアイコンをつけよう！」とCSSにお願いできちゃうんです。

—

3. さあ、実際にコードを書いて動かしてみよう！

百聞は一見にしかず。実際に手を動かして、その便利さを体感してみましょう。

以下のコードを、あなたのデスクトップにある適当なHTMLファイルに貼り付けて試してみてください。

HTMLファイル

後方一致セレクタの実験場

ダウンロード一覧

料金表の確認はこちら

応募用紙のダウンロード

公式サイトを見る

CSSファイル（style.css）

/ リストの見た目をちょっと整えるおまじない /
body {
font-family: sans-serif;
padding: 40px;
background-color: #f9f9f9;
}

.download-list {
list-style: none;
padding: 0;
}

.download-list li {
margin-bottom: 12px;
}

.download-list a {
text-decoration: none;
color: #333;
padding: 8px 12px;
display: inline-block;
background: #fff;
border-radius: 4px;
border: 1px solid #ddd;
}

/ ——————————————
ここからが本番！後方一致セレクタの登場
—————————————— /

/
href属性の値が “.pdf” で終わる要素を狙い撃ち！
「リンク先がPDFのやつ、集まれー！」という指示です。
/
a[href$=”.pdf”] {
background-color: #ffebee; / うすい赤色の背景にする /
border-color: #ffcdd2;
color: #c62828;
}

/ ついでにWordファイル（.docx）で終わるものも変えてみよう /
a[href$=”.docx”] {
background-color: #e3f2fd; / うすい青色の背景にする /
border-color: #bbdefb;
color: #1565c0;
}

ブラウザで開いてみましたか？
PDFのリンクは赤っぽく、Wordのリンクは青っぽく、それぞれクラスを一切書き換えていないのに、自動で色が変わったはずです！

これが、後方一致セレクタの持つ静かなるパワーです。

—

4. つまずきやすいポイントと、優しく大切な注意点

ここまで読んで、「なんだ簡単じゃん！」と思っていただけたなら嬉しいのですが、実務で触っていると、初心者の頃は必ずと言っていいほど「あれ？効かないぞ？」という罠にハマります。

先輩として、その罠への引っかかり方を先にシェアしておきますね。

① 大文字・小文字は厳密にチェックされる

プログラミングの世界は、人間よりもずっと几帳面です。
例えば、HTML側で `href=”data.PDF”` と大文字で書いてあるのに、CSS側で `a[href$=”.pdf”]` と小文字で書くと、スルーされます（動きません）。

「えっ、同じPDFじゃん！」と言いたくなりますが、コンピュータにとっては「A」と「a」は全く別の生き物です。もしファイルの拡張子がバラバラかもしれない時は、HTML側の記述を統一するか、慎重に確認しましょう。

② あくまで「属性の値の終わり」を見ていること

「タグの中のテキスト（文字）」に対しては、このセレクタは使えません。
あくまで、HTMLタグの中に書かれた属性（`href`や`class`、`src`など）の値の後ろを見ている、という点だけは勘違いしないように気をつけてくださいね。

—

おわりに：CSSをもっと自由に、もっと楽しく

今回は、ちょっとマニアックだけど最高にクールな「後方一致セレクタ `[attr$=value]`」について解説しました。

最初は「`$`なんて記号、覚えられないよ〜」と思うかもしれませんが、いざという時に「あ、あそこのCSS、後方一致でスッキリ書けるぞ」と思い出せたら、もうあなたは立派なCSS使いの仲間入りです。

HTMLを汚さずに、CSSの知恵でスマートにデザインをコントロールできるようになると、コーディングが何倍も楽しくなりますよ。

もしまた分からないことが出てきたら、いつでもここに帰ってきてくださいね。あなたのWeb制作の旅を、これからも応援しています！

【入門編】後方一致 [attr$=value] – CSS実践ガイド