CSS3 疑似要素 :blank と :empty 試してみた

恥ずかしながら空要素だけに適応できる:blank, :empty って疑似要素があることを知らなかったので試して見たメモ。

1.
<div class="square">
  <!-- comment-->
</div>
2.
<div class="square"> </div>
3.
<div class="square"><!--comment--></div>

.blank .square:blank {
  background-color: #ec4727;
}

.blank .square:-moz-only-whitespace {
  background-color: #ec4727;
}

.empty .square:empty {
  background-color: #fbc136;
}

👇
f:id:kikiki-kiki:20190421155756p:plain

:blank

CSS の :blank 擬似クラスは、子ノードを全く持たない要素、あるいは空のテキストノードまたはホワイトスペースのみを持つテキストノードを持つ要素に一致します。
出典: :blank - CSS: カスケーディングスタイルシート | MDN

空白や改行コードがあって空要素(:blank)として扱われる。
現状まだ草案でサポートされていない。
:-moz-only-whitespace 疑似セレクタでFireFoxでは使うことができる。

:empty

:empty は CSS の擬似クラスで、子を持たない要素を表します。子とは要素のノードまたは文字列 (ホワイトスペースを含む) です。コメントや処理指示は要素が空であるかどうかの判断には影響しません。
出典: :empty - CSS: カスケーディングスタイルシート | MDN

空白や改行コードがあると空要素(:empty)と判断されない。
将来的に :-moz-only-whitespace (:blank) と同じ挙動なる予定っぽい。

:empty のサポート状況

sample

上記のサンプルと React で簡単なTODOリスト作ってみました。リストが空になると:blank, :emptyがそれぞれ適応されるようにしています。

See the Pen CSS :blank & :empty test by KIKIKI (@chaika-design) on CodePen.

感想

:blankは良さそうだけど、まだサポートされてないから使えなそう。(将来的に:emptyに統一されそうな気もする)
:emptyは将来的に:blankの挙動になるSelectors Level 4 っぽいけど、現状はまだ中に改行やスペースがあるとスタイルが適応されないので特に動的なDOMだと注意が必要そう。
とりあえずReactだとDOMが空になったら改行も削除されるっぽいので:emptyで使えそう？