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のドキュメントに「※半角スペースなども文字に含まれる」とちゃんと記載されています（もうちょっと強調してよ！と思わなくもないですが）。