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の違い
:emptyの他に:blank擬似クラスもあります。
どちらもHTMLタグの中身が空かどうか判定する擬似クラスですが、「スペースを判定するかどうか」の違いがあります。
| 擬似クラス | 内容 |
|---|---|
| :empty | スペースがあると表示されない |
| :blank | スペースがあっても表示される |
See the Pen :empty & :blank by Masakazu Saito (@31mskz10) on CodePen.
この違いを見ると、:blankの方が便利そうに感じますが、:blankはまだ草案レベルでブラウザに実装されていません。
Firefoxであれば:-moz-only-whitespaceで使えますが、将来に期待レベルですね。
