:emptyはCSSの疑似クラスで、要素の中身が何もない場合に適用できます。
要素:empty {プロパティ: 値;}
① リストの空白要素を非表示にすることができる
以下の[Run Pen]を押して確認してみてください。
上記のように、[li::empty]でliの中が空の場合は非表示という指定ができます。
②テーブルの空セルに色をつける
以下の[Run Pen]を押して確認してみてください、
上記のように、[td:empty]で色を指定すれば、未入力のセルに色を付けることができます。
他にも、フォームのエラーメッセージなどが空の場合、不要なスペースができてしまわないよう削除する指定をするなど、使用できる場面は色々ありそうです。
以下のように、:emptyが適用されないケースがあるので注意してください。
:emptyは適用されないケースも少し多いですが、シンプルなタグに指定する場合には便利だと思うので、ぜひ試してみてください。
株式会社オートプロジェクトでは、バックエンド全般を安心してお任せいただけます。
サーバー設定やDB管理、セキュリティ対策など幅広いニーズに対応いたします。お気軽にご相談ください。