株式会社オートプロジェクト

Columnコラム
2025年1月31日
空の要素に指定できる:emptyとは?

:emptyとは?

:emptyはCSSの疑似クラスで、要素の中身が何もない場合に適用できます。

:emptyの指定方法

要素:empty {プロパティ: 値;}

:emptyの応用例

リストの空白要素を非表示にすることができる
以下の[Run Pen]を押して確認してみてください。

上記のように、[li::empty]でliの中が空の場合は非表示という指定ができます。

テーブルの空セルに色をつける
以下の[Run Pen]を押して確認してみてください、

上記のように、[td:empty]で色を指定すれば、未入力のセルに色を付けることができます。

他にも、フォームのエラーメッセージなどが空の場合、不要なスペースができてしまわないよう削除する指定をするなど、使用できる場面は色々ありそうです。

:emptyが適用されないケース

以下のように、:emptyが適用されないケースがあるので注意してください。

:emptyは適用されないケースも少し多いですが、シンプルなタグに指定する場合には便利だと思うので、ぜひ試してみてください。

 

Webデザイナー / コーダーのみなさまへ

株式会社オートプロジェクトでは、バックエンド全般を安心してお任せいただけます。

サーバー設定やDB管理、セキュリティ対策など幅広いニーズに対応いたします。お気軽にご相談ください。

>> バックエンドについて、オートプロジェクトに問い合わせをする