これもできるの！？JSいらずのちょっと便利なCSSセレクタ

こんにちは！
Maromaroのgenです。

私はフロントエンドエンジニアとしてCSSやJSを用いてWebサイトを制作しているわけなのですが、日々コーディングをしているとふとしたタイミングで

• 「最後の要素にだけスタイルを当てたい」
• 「この要素があるときだけ見た目を変えたい」
• 「特定のリンクだけ装飾したい」

のようなことに出くわすことが多くあります。

そんなとき、ついついJSでの制御に頼ってしまったりしがちなのですが、実は結構CSSだけで解決できるケースも多いんです！
今回は普段から私がよく使用するクラスを増やさなくても使える便利なCSSセレクタを4つサンプル付きでご紹介します！
JSを書く前に、サクッとCSSで解消できるようなそんなきっかけになれば嬉しいです。

その１：:empty

See the Pen empty_sampe01 by 増田元気 (@vxnjluqk-the-sans) on CodePen.

:empty は、中身が空の要素にだけスタイルを当てることができる疑似クラスです。
例えば：

• データがないときにグレーアウトする
• エラー表示を出す
• 空のときだけ「未入力」と表示する

などの場面で使うことができ、疑似要素（::before など）と組み合わせれば、空のときだけメッセージを表示することも可能です。

See the Pen empty_sample02 by 増田元気 (@vxnjluqk-the-sans) on CodePen.

注意点：
改行やスペースが入っていると「空」と判定されません！HTMLはきれいに書くようにしましょう。

その２：属性セレクタ（前方一致）

See the Pen Untitled by 増田元気 (@vxnjluqk-the-sans) on CodePen.

^= は、指定した文字列から始まる属性値にマッチします。

例えば：

• 特定ディレクトリ配下のリンクだけ装飾
• 外部APIのURLだけデザイン変更

クラスを増やさなくても制御できるのがポイントです。

その３：属性セレクタ（部分一致）

See the Pen in_match by 増田元気 (@vxnjluqk-the-sans) on CodePen.

*= は、指定した文字列を含んでいればOKというセレクタです。
前方一致と違い、「どこに含まれていても」マッチします。

例えば：

• 特定ドメインへのリンク
• URLに admin が含まれているページ
• 画像名に thumb が入っているもの

「クラスを付けるほどでもないけど分岐したい」そんなときにとても便利です。

その４：属性セレクタ（末尾一致）

See the Pen after_match by 増田元気 (@vxnjluqk-the-sans) on CodePen.

最後は $= です。これは、指定した文字列で終わる属性値にマッチします。

例えば、.pdf ファイルへのリンクにだけアイコンを付けたい場合、上記のサンプルの記述にするだけで.pdf で終わるリンクにだけアイコンを追加することができます。
JSは不要、クラスも不要、HTMLに仕込むimgも不要です。

まとめ

今回ご紹介したのは以下の4つです。

• :empty → 空の要素にマッチ
• ^= → 先頭が一致
• *= → 含まれていれば一致
• $= → 末尾が一致

クラスを増やす前に、JSを書く前に、
「セレクタで解決できないか？」と考えてみてください。

CSSセレクタを知るだけで、コードはもっとシンプルになります。
ちょっとしたTIPSですが、日々のコーディングが少し楽になるはずです。ぜひ使ってみてください。