こんにちは！フロントエンドの現場を長年フラフラと……もとい、最前線で駆け抜けてきたチーフアーキテクトの私です。
CSSを書き始めたばかりの頃って、クラス（`.`）やID（`#`）だけでも十分お腹いっぱいになりますよね。「なんだか記号が多くて目が回りそう……」なんて、モニターの前でコーヒーを飲みながら遠い目をした経験、あなたにもありませんか？
大丈夫ですよ、安心してください。今日お話しする「属性セレクタ」の基本、そしてその一番シンプルな形である `[attr]`（特定の属性を持つ要素を選ぶ仕組み）は、知ってしまえばあなたのCSSライフを劇的に楽にしてくれる「秘密の合言葉」のようなものなんです。
難しい理屈はさておき、まずはリラックスして、身近な例えから紐解いていきましょうか。
—
属性セレクタって、一体なんなの？（お買い物の例え）
突然ですが、大きなスーパーマーケットのバックヤードを想像してみてください。
棚には何千というダンボール箱が積み上げられています。
ここで、「全部の箱を赤く塗り替えて！」と言われたらどうでしょう？ 気絶しそうになりますよね。
でも、「『要冷蔵』という札が貼ってある箱だけ、青いテープを貼って！」と言われたらどうでしょう？ 箱の名前（クラス名）がバラバラでも、「要冷蔵」という札（属性）さえ目印にすれば、一発で目的の箱を見つけられますよね。
CSSの属性セレクタも、これとまったく同じことをやっているんです。
HTMLのタグを見ると、`` や `` のように、山括弧（`< >`）の中に `属性名=”値”` という「ラベル」がペタペタ貼ってありますよね。
このラベルを目印にして、「おっ、この札を持っている子だね！こっちにおいで！」とCSSでピンポイントにつかまえるのが、属性セレクタの正体です。
—
一番基本の形：`[attr]` の世界
今日フォーカスするのは、その中でも最もシンプルで、すべての基本となる `[属性名]` という書き方です。
「値（value）」は気にせず、「とにかくその属性が『存在している』要素をすべてキャッチする」という力技でありながら、すごくスマートな機能です。
書き方のルール
書き方は拍子抜けするほど簡単です。要素のあとに、半角の角括弧 `[ ]` を置いて、その中に探したい属性名を書くだけ。
/ 「title」という属性を持っている要素なら、なんでも対象にするよ！ /
[title] {
/ ここにスタイルを書く /
}
「あれ、タグ名を書かなくていいの？」と思いました？
そう、タグ名を省略して `[title]` と書けば、「`
—
実務でどう使う？リアルなコード例を見てみよう
「理屈は分かったけど、実際どんな時に使うの？」
はい、現場でよくあるシチュエーションをそっとコードに落とし込んでみました。一緒に見ていきましょう。
例1：リンクに「新しいタブで開く目印」をつけちゃおう
Webサイトを作っていると、外部サイトへのリンクなどで `target=”_blank”`（新しいタブで開く）を指定することがよくありますよね。ユーザーに対して「あ、このリンクは別のタブが開くんだな」と視覚的に優しくするために、アイコンをそっと添えてあげたい時、属性セレクタは大活躍します。
通常の内向きリンク：私たちについて
外部へのリンク（別タブ）：公式パートナーサイト
/ CSSの世界 /
/ すべてのリンクの基本スタイル /
a {
color: #0066cc;
text-decoration: none;
}
/ ★ここがポイント！
target属性を持っているリンク（つまり別タブで開くやつ）だけに反応させます /
a[target] {
color: #e65c00; / ちょっと目立つ色にする /
}
/ ついでに、ちょっとした疑似要素で「外に行くよ」っていうマーク（↗）をつけてみよう /
a[target]::after {
content: ” ↗”;
font-size: 0.8em;
}
わざわざ `class=”external-link”` なんて泥臭いクラス名をHTML側に書かなくても、ブラウザが勝手に `target` 属性を見つけてスタイリングしてくれる。これが、属性セレクタのスマートさであり、美しさなんです。
—
つまずきやすいポイントと、先輩からの優しいアドバイス
初心者の頃、私もここでよく悩みました。読者のあなたも、もしかしたら同じところで「あれ？」と思うかもしれないので、先回りしてこっそりシェアしておきますね。
Q. クラス（`.`）やID（`#`）と何が違うの？使い分けは？
- クラス（`.`）：人間が自分で考えて意図的につける「お化粧」のようなもの（例: `.btn-primary`）。
- 属性セレクタ（`[attr]`）：HTMLの仕様として本来持っている「機能的なラベル」に頼るもの（例: `[disabled]` や `[target]`）。
基本的には、ボタンのデザインなどはクラス名で管理するのが安全で分かりやすいです。ただ、「入力欄が無効化（disabled）されているときだけ、うっすら灰色にしたい」といった『状態』や『機能』に連動させたい時に、属性セレクタは真価を発揮します。
Q. 大文字と小文字って厳密に区別されるの？
HTMLの属性名（`target` や `href` など）は、基本的に大文字・小文字を区別しませんが、CSSのセレクタとして書くときは、余計なトラブルを防ぐためにすべて半角小文字で書くのがプロの現場の暗黙のルールです。これだけ覚えておけば間違いありません！
—
おわりに
お疲れ様でした！
`[attr]` という一番シンプルな属性セレクタの姿、少し身近に感じられたでしょうか？
最初は「記号が多くて怖いな」と感じるCSSの世界も、仕組みを知ってしまえば、私たちの手足を何倍にも伸ばしてくれる頼もしい相棒に変わっていきます。焦らず、一歩ずつ、あなたのペースでコードを書いていってくださいね。
もし分からないところで躓いたら、またいつでもこのブログに帰ってきてください。現場のエンジニアたちは、いつだってあなたの挑戦を応援していますよ！
コメント