こんにちは！フロントエンドの現場を長年フラフラと……もとい、渡り歩いてきたチーフアーキテクトの私です。
CSSを書き始めたばかりの頃って、クラス名（`.btn`とか）やID（`#header`とか）ばかり使いがちですよね。「これで十分いけるじゃん！」って思っていた矢先に、「あれ、これどうやって指定するんだ……？」という壁にぶつかるのが、この属性セレクタの世界です。
大丈夫ですよ、安心してください。最初は誰だって呪文書のように見えるコードに怯えるものですが、本質を掴んでしまえば怖くありません。今日はその第一歩として、一番基本でありながら強力な「属性値の完全一致（`[attr=value]`）」について、おしゃべりするような感覚で紐解いていきましょう！
—
そもそも「属性（Attribute）」ってなんだっけ？
CSSの解説に入る前に、ちょっとだけHTMLの話をさせてください。
HTMLのタグの中には、`class=”btn”` や `type=”text”` のように、半角スペースのあとに書く「おまけ情報」のようなものがありますよね。あれが属性です。
身近なもので例えるなら、「クローゼットの中にある服のタグ」みたいなものです。
- 「これ、色は何色？」→ `color=”red”`
- 「これ、サイズは？」→ `size=”L”`
- 「これ、形は？」→ `type=”checkbox”`
HTMLという広大なクローゼットの中から、「おい、赤い服だけこっちに持ってこい！」と指図するために使うのが、今回主役の属性セレクタなんです。
—
完全一致セレクタ `[attr=value]` の正体
その中でも今回スポットを当てるのは、「属性の値が、指定した文字列と1ミリも違わず完全に一致する」という、潔いまでにストイックなやつです。
書き方はこうです。
/ 基本の形 /
セレクタ[属性名=”完全に一致させたい値”] {
/ ここにスタイルを書くよ /
}
「完全一致」という言葉通り、大文字・小文字はもちろん、スペルミスや不要なスペースすら許しません。まさに「我が道を行く」職人のような厳しさを持っていますが、だからこそ「ここぞ！」というピンポイントな指定には最高の相棒になります。
—
【実例】お買い物のフォームを優しく彩ってみよう
百聞は一見にしかず。みんながよく見る、お買い物サイトの入力フォームを例にして実際にコードを書いてみましょう。
テキストを入力する欄（`input type=”text”`）や、チェックを入れる箱（`input type=”checkbox”`）など、HTMLの `` タグは形を変幻自在に変えますよね。ここで属性セレクタが大活躍します。
HTMLのイメージ
CSSで属性を狙い撃ちする！
「テキストを入力する欄（`type=”text”`）だけ、ちょっと背景色を優しくピンク色にしたいな」と思ったとします。クラス名をつければ簡単ですが、HTMLをいじりたくない、あるいはいじれない事情があるときは、CSSだけでこう書けます。
/ type属性の値が “text” と完全に一致する要素を狙い撃ち！ /
input[type=”text”] {
background-color: #fff0f3; / ほのかなピンク色 /
border: 2px solid #ffb6c1; / 枠線も可愛く /
border-radius: 4px; / 角を少し丸くする /
}
/ ついでに、チェックボックス（type=”checkbox”）のサイズも少し大きくしちゃおう /
input[type=”checkbox”] {
width: 18px;
height: 18px;
cursor: pointer; / マウスカーソルを指の形にする /
}
どうでしょう？ クラス名（`.class`）やID（`#id`）をわざわざHTMLに追加しなくても、「HTMLがもっている本来の性質（属性と値）」を見るだけで、自由自在にデザインを当てられるようになったんです。これが属性セレクタの醍醐味です！
—
初学者がハマりがちな「落とし穴」と、その処方箋
現場の新人さんを見ていると、この完全一致セレクタでよくつまずくポイントがいくつかあります。あらかじめ知っておけば怖くないので、こっそりシェアしておきますね。
1. ダブルクォーテーション（””）は忘れないほうが無難
`[type=text]` のように、値のまわりのダブルクォーテーション（またはシングルクォーテーション）を省略できる場合もあります。でも、値の中に特殊な文字が入ったりすると急に動かなくなったりするので、基本的には `[type=”text”]` のように囲むクセをつけておくのが、現場のエンジニアとしての処世術です。
2. 「完全一致」の厳しさに泣く
例えば、クラス名に `class=”btn-primary-large”` と入っているときに、もし `[class=”btn”]` と書いても絶対にスタイルは当たりません。
「だって `btn` だけじゃなくて、後ろにいろいろくっついてる完全一致じゃないでしょ？」というのがCSSの言い分です。
もし「一部が含まれていればいいのに！」という場合は、完全一致ではなく `[class=”btn”]`（部分一致）という別の書き方を使うことになります。今回は「完全一致（`=`）」なので、「完全にその文字そのもの！」というときだけ使ってあげてくださいね。
—
まとめ：あなたのCSSの引き出しを増やす第一歩
今回は、属性セレクタの基本である「完全一致（`[attr=value]`）」についてお話ししました。
- HTMLが元から持っている「属性」と「値」をそのままCSSの目印にできる。
- `input[type=”text”]` のように、特定のパーツだけを狙い撃ちするのにめちゃくちゃ便利。
- 「1文字たりとも違っちゃいけない」という完全一致のルールを優しく守ってあげる。
最初は「覚えることが多くて大変だな……」と感じるかもしれませんが、使いこなせるようになると、HTMLを汚さずにスマートで美しいCSSが書けるようになり、自分のコードがちょっと誇らしく思えるはずです。
焦らず、自分のペースで、楽しみながらCSSとお友達になっていきましょう。
それではまた、次の現場の知見でお会いしましょう！チーフアーキテクトの私でした。
コメント