CSS3 : 要素が空の時のセレクタ「:empty」の使い方

See the Pen CSS :empty Test by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

上記サンプルのxアイコンをクリックしてリストをすべて消してみてください。

「List is Empty」と表示されます。これはCSS3のセレクタ「:empty」を使い表示しています。

「リストが0件の表示」はシステム側で判別してHTMLをそのように出力することが多いですが、CSSだけで表現できるようになることで、プログラム側から0件表示の処理を省き、実行速度の向上や0件表示にかける開発コストを減らすこともできるかもしれません。 （とはいえ0件の時のデバッグは欠かせませんが…）

HTML

<ul class="emptylist">
  <li><i class="fa fa-remove"></i>list1</li>
  <li><i class="fa fa-remove"></i>list2</li>
  <li><i class="fa fa-remove"></i>list3</li>
</ul>

HTMLはごくシンプルです。リストにはemptylistとクラス名を付けています。

CSS

.emptylist:empty:before {
  display: block;
  padding: 10px;
  content: 'List is Empty';
  color: #ccc;
  text-align: center;
}

要となる:emptyセレクタを使った箇所の表示です。emptylistの中身が空の時にこのスタイルが有効になります。

やっていること自体はemptylist上に「List is Empty」と表示する要素を作っているだけで特殊なことはしていません。:emptyセレクタ自体はとても簡単に扱えます。

しかしこの「空にする」点について注意が必要です。

:emptyはDOMを完全に空にする必要がある。

上記サンプルではJavaScriptを使い、リスト内のxをクリックするとjQueryで<li>を消していますが、単純に消しただけだとDOM上は<ul>内に半角スペースや改行などのホワイトスペースが残ります

ホワイトスペースが残っているだけでも:emptyは適用されず、DOMからホワイトスペースを完全に消す必要があります。以下のように閉じタグと改行なくピッタリくっつく状態が最良です。

<ul class="emptylist"></ul>

そのためサンプルのJavaScript内では以下のような処理にしています。

$('.fa-remove').on('click', function() {
  emptylist = $(this).parents('.emptylist');
  $(this).parent('li').remove();
  if(emptylist.children('li').length === 0) {
    emptylist.html('');
  }
});

• xアイコンがクリックされたら
  • emptylistを取得しておく
  • <li>を消す
  • emptylist以下の<li>が0個ならemptylistの中身を空にする

:hoverセレクタが一般化した時も、従来JavaScriptをやっていた処理をCSSだけに任せられるようになったのと同じように、:emptyも高いポテンシャルを持つセレクタなのでぜひ試してみてください。