WebDesigner's Memorandumウェブデザイナーの備忘録

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

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で使えますが、将来に期待レベルですね。

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね