こんにちは！フロントエンドの現場を長年うろついている、いわゆる「CSSのおじさん」ことチーフアーキテクトです。
CSSを書き始めた頃って、`class`や`id`ばかり使いがちですよね。「とりあえず困ったら `class=”btn”` をつけとけ！」みたいな。もちろんそれでも動くんですが、実務の現場を渡り歩いていると、「あ、これ、属性セレクタの奥の手を知っていれば、HTMLを汚さずに一撃で解決できるのに……！」という場面に何度も出くわします。
今回は、数ある属性セレクタの中でも、ちょっと魔法のように便利で、かつ少しだけ名前が厳つい部分一致セレクタ `[attr=value]` について、どこよりも優しく、そして泥臭く解説していきますね。
「難しそう……」なんて身構えなくて大丈夫ですよ。ゆっくり紐解いていけば、明日からあなたのコードを書くスピードが一段と上がりますから。
—
1. 部分一致セレクタ `[attr=value]` ってなに？
まず、この暗号のような記述（`[attr=value]`）の見た目にビビらないでくださいね。これはエンジニア界隈の略語みたいなもので、日本語に直すとこうなります。
> 「HTMLのタグの中に書いてある特定の属性（attr）の中に、指定したキーワード（value）が“どこでもいいから含まれている”要素を全部つかまえろ！」
この「どこでもいいから（部分一致）」というのがポイントです。
身近な例えで考えてみましょう
スーパーのレジを想像してください。いろんな飲み物が流れてきます。
- お茶（`product-green-tea`）
- コーラ（`product-cola`）
- オレンジジュース（`product-orange`）
もしあなたが、「名前に `tea` が入っている商品だけ、緑色のシールを貼りたい！」と思ったとします。
わざわざ一つずつ「これはお茶です」と新しいシールを貼らなくても、レジの機械に「名前に `tea` という文字が入っていたら、自動的に緑のシールを貼りなさい！」と命令できたらラクですよね。
それをCSSで実現するのが、この `[attr=value]` なんです。アスタリスク（“）は、プログラミングの世界ではよく「すべて」や「内包」の意味で使われます。ここでは「文字のどこかに含んでいたらOK！」の合図だと覚えておきましょう。
—
2. 実際のコードで動きを見てみよう
百聞は一見にしかず。まずは実際に動くコードを見てみましょう。
今回は、Webサイトによくある「いろんな種類のファイルがダウンロードできるリンク集」をイメージしてみます。
ここで、「PDFのリンクには、ひと目でそれとわかるように、PDFのアイコン（あるいは赤っぽい色）をつけたいな」と思いました。
通常なら `class=”pdf-link”` などを全部の``タグに追加したくなるところですが……HTMLをいじらなくても、CSSだけでこう書けます。
/ CSSの記述 /
/ href属性の値の中に “pdf” という文字列が含まれているものすべてをターゲットにする /
a[href=”pdf”] {
color: #d9381e; / ちょっとPDFっぽい赤茶色にする /
font-weight: bold;
}
/ ついでに、”xlsx” が含まれていたらエクセルっぽい緑色にする /
a[href=”xlsx”] {
color: #107c41;
font-weight: bold;
}
たったこれだけです！
HTMLを一切書き換えずに、リンクのURL（`href`）の中身をCSSが勝手に覗き見して、「お、ここに `pdf` って書いてあるな？」と見つけてスタイルを適用してくれるんです。すごくないですか？
—
3. ここでよくある「つまずきポイント」と優しいフォロー
新しいセレクタを覚えたとき、初心者のころに誰もがやってしまう「あるあるな失敗」があります。安心して進めるように、あらかじめ罠の場所をシェアしておきますね。
つまずき①：大文字と小文字のトラップ
HTMLの世界は、時々ちょっとお堅いです。
例えば、`href=”REPORT.PDF”` と大文字で書かれていた場合、先ほどの `[href=”pdf”]` は反応してくれないことがあります（ブラウザや環境によります）。
▼ 大丈夫、こうすれば解決します！
CSSのセレクタの最後に `i` というおまじない（大文字・小文字を区別しないフラグ）をつけると、大文字だろうが小文字だろうが全部まとめて優しくキャッチしてくれます。
/ 大文字・小文字を気にせず、”pdf” や “PDF” をすべて捕まえる /
a[href=”pdf” i] {
color: #d9381e;
}
半角スペースのあとに `i` を入れるだけ。これを知っているだけで、実務での「あれ、効かない！？」を防げます。
—
4. 実務で役立つ、ちょっとリアルな活用シーン
「へえ、便利そうだけど、実際どんな時に使うの？」という声が聞こえてきそうですね。現場のプロがこっそり使っている、ちょっと実用的なアイディアをひとつご紹介します。
例えば、外部サイトへ飛ぶリンク（例: `https://twitter.com/…` や `https://github.com/…`）にだけ、自動的に「新しいタブで開きますよ」というマーク（↗︎みたいなアイコン）をつけたい時。
/ サイトのドメイン（例：外部サービス）の文字列を部分一致で狙い撃つ /
a[href=”twitter.com”]::after,
a[href=”github.com”]::after {
content: ” ↗”; / リンクの後にこっそりアイコン的な文字を足す /
font-size: 0.8em;
opacity: 0.7;
}
CMS（WordPressなど）でブログを書いていると、ライターさんがうっかり外部へのリンクにアイコン用のクラスをつけ忘れたりします。そんな時でも、この部分一致セレクタをCSSの仕掛けとして仕込んでおけば、「URLにそのドメインが含まれていれば、自動的に勝手にデザインを整えてくれるシステム」が作れちゃうわけです。
保守や運用が、劇的に楽になりますよ。
—
まとめ
今回は、部分一致セレクタ `[attr=value]` についてお話しました。
- 属性（`href`や`class`など）の中に、指定した文字が「どこかに含まれていれば」反応する
- HTMLを書き換えられない、あるいは書き換えたくない場面で絶大な効果を発揮する
- 大文字・小文字で悩んだら `i` を後ろにつければ安心！
最初は少し呪文のように見えるCSSのセレクタたちも、こうして意味を分解してあげると、どれも私たちウェブ制作者の面倒を減らしてくれる「頼もしい相棒」に変わっていきます。
焦らず、まずは自分の手元のエディタで、適当なリンクや画像に試してみてくださいね。「お、ちゃんと色が変わった！」という小さな感動の積み重ねが、あなたを一人前のフロントエンド・エンジニアに育ててくれます。
それでは、また次回のCSSの小部屋でお会いしましょう。楽しいコーディングライフを！
コメント