CSSの世界へようこそ！フロントエンドの最前線でコードを書いていると、つい「どうやって複雑なUIを作るか」ばかり考えがちですが、実はCSSの面白さって、こういう「痒いところに手が届く」ような小さな道具をどれだけ使いこなせるかに詰まっているんです。
今日は、CSSのセレクタの中でも、魔法のように便利で、知っているだけで作業が劇的に楽になる「属性セレクタ（`[attr$=value]`）」についてお話しします。
難しそうに見えますか？ 大丈夫、一緒に紐解いていきましょう。
—
属性セレクタ（`[attr$=value]`）ってなに？
簡単に言えば、「特定の文字で終わるものを、こっそり見つけてスタイルを当てる」ための仕組みです。
例えば、あなたのデスクの上に、たくさんの書類が入った引き出しがあると想像してください。その書類の中に、ファイル名が「.pdf」や「.jpg」で終わるものが混ざっていますよね。「ファイル名が何であれ、とにかく最後が『.pdf』で終わる書類だけ、目立つように赤いクリップを留めておこう」――これが、属性セレクタの役割です。
`[attr$=value]` という書き方は、少し呪文みたいに見えますが、パーツに分けるとこうなります。
- `[]`：これは「属性という『付箋』を見てね！」という合図。
- `attr`：どんな付箋か（例：`src`や`href`など）。
- `$`：これが一番重要！ 「最後（末尾）」という意味。
- `value`：どんな文字で終わっているか。
つまり、「最後がこの文字で終わるやつだけ、ちょっとこっちに来て！」と呼びかけるセレクタなんです。
—
実践！ どんなときに役立つの？
一番よくあるのは、「ファイルのアイコンを自動で付けたいとき」です。
Webサイトで、リンク先がPDFなのか、画像なのか、あるいは外部サイトなのかをアイコンで示したいことってありますよね。
いちいち一つ一つにクラス名（例：``）を付けるのは大変だし、修正漏れも起きやすい。そんなとき、この属性セレクタが頼りになります。
コードで見てみましょう
/ リンクの最後が .pdf で終わるものだけ、色を赤くして目立たせる /
a[href$=”.pdf”] {
color: #d32f2f;
font-weight: bold;
}
/ リンクの最後が .pdf で終わる要素の「後ろ」に、メモを表示する /
a[href$=”.pdf”]::after {
content: ” (PDFファイル)”;
font-size: 0.8em;
color: #999;
}
どうでしょう？ `class`を書き換える必要なんて、どこにもないんです。HTML側はただのリンクのままなのに、CSSが勝手に「お、こいつのURLはPDFで終わってるな」と判断して装飾してくれる。これぞ職人の技、という感じがしませんか？
—
つまずきやすいポイントと「大丈夫ですよ」
ここでおそらく、「`$`ってなんだっけ？ “だっけ？」と迷うことがあるはずです。大丈夫、みんな最初はそうやって悩みます。
- `$=`：末尾（End）。ドル記号の「$」は、英語の文章の最後につく「$」のようなイメージ（…は少し無理があるかもしれませんが！笑）。「最後」という文字の形を思い出してください。
- `=`：どこかに含まれている（Contain）。これは「全部（）」という意味です。
- `^=`：先頭（Start）。これは「山（^）」が上を向いているので、一番上（最初）です。
もし忘れてしまっても、その場で調べて「あ、そうだった」と確認すればそれで十分です。このセレクタを使いこなせると、HTMLの構造を汚さずに、CSSだけで「賢いUI」が作れるようになります。
—
最後に：CSSは「観察」の学問
属性セレクタを使いこなせるようになるということは、Webサイトという「書類の山」を、少し高い視点から眺められるようになるということです。
「一つ一つにクラスを付ける」という作業から卒業して、「ルールを決めて、あとはブラウザに任せる」という考え方に切り替わると、CSSを書くのがもっともっと楽しくなります。
最初はうまくいかなくても大丈夫。まずは自分の練習用コードで、適当なリンクを作って `[href$=”.com”]` なんて書いてみてください。ページ内の `.com` で終わるリンクが一斉に赤くなったりしたら、きっと「おっ！」と感動するはずですよ。
その小さな「おっ！」の積み重ねが、あなたを最高のフロントエンドエンジニアへと育ててくれます。応援しています！
コメント