CSS selector for empty element

最近做功能時，發現有個已經廣泛被支援的 CSS 選擇器 :empty 滿好用的
:empty 符合的是沒有任何子節點的元素
只要裡面有空白、換行符號等就不符合 :empty selector
comment 則是唯一不影響比對規則的內容

這個選擇器非常適合拿來做預設外觀，或是相對的用途

簡單的示範如下

See the Pen
:empty sample by veni (@veni_vi)
on CodePen.

像是做一些多行內容的顯示區塊時
我們會希望在沒有內容的時候可以保持一行的行高，這樣看起來比較好看
而不是看到一個被壓扁的區塊
在過去可能的做法會判斷沒有內容時塞一個空白進去
現在透過 :empty selector 就不需要再多這段判斷

或者是相對的，像在做輸入檢查的錯誤提示上色
讓 :empty 時保持跟其他區塊相同的背景色
而在有錯誤提示訊息時把背景色調成警示色

由上述例子可以看到
不需要用 JS 控制，所以也可以避免來自 JS 的流程錯誤產生的問題
另外雖然元素內容是空的，但是可以做的外觀調整依然很多
例如用 background-image
或是範例中的 element 3 用 data-attribute 配合 pseudo-element 顯示動態文字
這些方式都能幫助產生多變的 component 預設外觀

有個相近的 CSS 選擇器 :blank 可能也常常被看到跟 :empty 一起討論
不過一來是這個規格還只是實驗性的，支援度還幾乎沒有
另外是可以從 MDN 網頁中看到，規格制訂委員會對於 :blank 的實用性還有懷疑的聲音
:blank 還不是目前時間點需要關注的規格