CSS疑似要素の「:empty」でタグの中身が空のときのスタイルを設定する

ブログの記事の一覧表示や、ウェブサービスを作るときは中身が何もない場合を作る必要があります。

PHPなどの条件分岐で対応する方法もありますが、簡易的なものであれば、CSSの疑似要素の「:empty」や「:blank」を使えばすぐ実現できます。

:empty

:emptyはHTMLタグの中身が空の場合のスタイルを設定できる疑似要素です。

何もない場合のスタイルが付けられますし、::before、::afterの疑似要素と組み合わせれば、何もアイテムがない場合に文言を表示させられます。

See the Pen :emptyの使い方 by Masakazu Saito (@31mskz10) on CodePen.

上記のサンプルでは、要素の中身がない場合に「中のアイテムがありません」という文言が表示されますが、HTMLやJavaScriptを使わずCSSだけでこの文言を表示させています。

:emptyの他に:blank擬似クラスもあります。
どちらもHTMLタグの中身が空かどうか判定する擬似クラスですが、「スペースを判定するかどうか」の違いがあります。

擬似クラス	内容
:empty	スペースがあると表示されない
:blank	スペースがあっても表示される

See the Pen :empty & :blank by Masakazu Saito (@31mskz10) on CodePen.

この違いを見ると、:blankの方が便利そうに感じますが、:blankはまだ草案レベルでブラウザに実装されていません。

Firefoxであれば:-moz-only-whitespaceで使えますが、将来に期待レベルですね。