やあ、こんにちは。CSSの世界へようこそ。
フロントエンドの深淵を覗き込んでいる君に、今日はちょっとだけマニアックだけど、知っておくと「おっ、デキるな」と思われる、そんな奥義を授けようと思う。
今回取り上げるのは、属性セレクタの`[attr~=value]`だ。
「なんだか記号が並んでいて難しそう……」と思ったかな？ 大丈夫。名前は難解だけど、やっていることは驚くほどシンプルで、私たちの暮らしにある「ある仕組み」と全く同じなんだ。さあ、肩の力を抜いて見ていこう。
—
属性セレクタ `[attr~=value]` って何者？
このセレクタを一言で言うと、「スペースで区切られた単語リストの中に、お目当てのキーワードが一つでも含まれていたら、その子を捕まえる」という凄腕のハンターだ。
イメージしてみてほしい。君が大きな図書館の司書さんだとしよう。
本棚には、「魔法」「冒険」「料理」「歴史」……と、いろんなタグが付いた本が並んでいるよね。もし君が「『魔法』というキーワードが入っている本を全部見つけて！」と指示されたとき、この属性セレクタが一番の働き手になるんだ。
なぜ「スペース区切り」が重要なのか？
CSSでクラスを付けるとき、こんな風に書くことはないかい？
`
この`class`属性の中には、「card」「featured」「primary」という3つの言葉が、スペースで仕切られて並んでいるよね。
もし君が「`featured`（目立つ）という言葉が入っている要素だけ色を変えたい！」と思ったとき、`[class=”featured”]`と書くと失敗する。なぜなら、HTML側は「classの名前が完全に『featured』という一語だけ」じゃないと反応してくれないからだ。
そこで登場するのが、`~=` という魔法の記号なんだ。
—
実際にコードで見てみよう
まずはこのコードを見てほしい。エディタにコピーして、ブラウザで眺めてみると「なるほど！」と実感が湧くはずだ。
このコードで何が起きた？
1. 一番上の `class=”box apple”` は、無事に赤くなったよね。
2. 真ん中の `class=”box orange apple”` も、ちゃんと赤くなったはずだ。ここがポイント！`apple`が他の単語と混ざっていても、ちゃんと探し出せた。
3. 一番下の `class=”box banana”` は、`apple`を持っていないからそのまま。
どうだい？ 「スペースで区切られたリストの中から、特定のキーワードをピンポイントで抜き出す」。この感覚さえ掴めば、もうCSSの属性セレクタは怖くない。
—
実務の現場でどう使うの？
正直に言うと、普段のCSS設計ではクラス名だけで制御することが多いから、このセレクタを毎日バリバリ使うわけじゃない。でも、こういう場面では神がかり的な力を発揮するんだ。
- ライブラリやCMSが吐き出したHTMLをいじれない時
外部ツールが勝手に「class=”btn primary large”」みたいな長い名前を付けてきた時、HTMLを書き換えずにCSSだけで「primaryというクラスが付いてるやつだけ調整したい」なんて時に非常に便利だ。
- 特定のアイコンや状態を管理したい時
「状態」を表す単語をスペース区切りで付与していく設計（いわゆる修飾クラス）を採用している現場では、非常にスマートな選択肢になる。
—
最後に：小さなつまずきを恐れないで
初心者の頃は、「なんでこんな記号を覚える必要があるの？」と思うかもしれない。でもね、CSSを深く知るということは、「ブラウザにどうやって対象を伝えるか」というコミュニケーションの方法を覚えることなんだ。
`[attr~=value]` は、CSSが用意してくれた「柔軟な探し方」の一つ。
全部を無理に覚える必要はないよ。ただ、「あ、そういえばあんな探し方があるな」と頭の片隅に置いておいて、困ったときにまたここに戻ってきてくれればいい。
現場では、教科書通りの綺麗なHTMLばかりじゃない。泥臭いコードと戦う君にとって、このセレクタはきっと、いつか強力な武器になるはずだ。
また分からないことがあったら、いつでも聞いてくれ。君のコーディングライフを応援しているよ。
コメント