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

URL: https://webrandum.net/css-empty-blank/
公開日: 2019-11-30
更新日: 2019-11-30
カテゴリー: コーディング
タグ: CSS
出典: Webrandum（著者: サイトウ マサカズ）

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

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

## :empty

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

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

See the Pen [:emptyの使い方](https://codepen.io/31mskz10/pen/yLLGjZv) by Masakazu Saito ([@31mskz10](https://codepen.io/31mskz10)) on [CodePen](https://codepen.io).

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

## :emptyと:blankの違い

`:empty`の他に`:blank`擬似クラスもあります。

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

| 擬似クラス | 内容 |
| --- | --- |

| :empty | スペースがあると表示されない |
| --- | --- |

| :blank | スペースがあっても表示される |
| --- | --- |

See the Pen [:empty & :blank](https://codepen.io/31mskz10/pen/OJJrEPp) by Masakazu Saito ([@31mskz10](https://codepen.io/31mskz10)) on [CodePen](https://codepen.io).

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

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