HTMLの:empty擬似クラスを使う上での落とし穴を教わったので、ハマった記念に書き残しておきます。
empty属性とは
「中身が空の時だけ適用されるスタイルを定義してくれそう」
そんな雑なイメージを持ちますよね。
イメージが先行した状態でCSSを書くと、痛い目を見るという話を書いていきます。
適用されるケース
<div></div>
<div><!-- comment --></div>
上の2ケースは問題無く適用される。
コメントを突っ込んでも、ちゃんと適用されます。
適用されないケース
<div> </div>
<div>
</div>
<div>
<!-- comment -->
</div>
上の3パターンは、empty擬似クラスが適用されません。
要するに、__半角スペースや改行が入ってるとダメだよ__ってことです。
サンプルデモ
まとめ
APIから取得したJSONをHTMLのテンプレートに流し込んで整形する、という実装を経験された方は多いのではないでしょうか？
「取得したJSONのvalueがnullの時はトルツメ(display:none)することも可能なので、興味のある方は使ってみるといいかもしれません。
これは自戒の意味も込めてますが・・ドキュメントはよく読みましょう(ヽ´ω`)。
※MDNのドキュメントに「※半角スペースなども文字に含まれる」とちゃんと記載されています（もうちょっと強調してよ！と思わなくもないですが）。