:emptyと:blank（仮）擬似クラス

次のdiv要素のうち、:empty擬似クラスが適用されるのはどれでしょう。

1. テキストあり
<div>(Text)</div>

2. 空
<div></div>

3. 半角スペース1つ
<div> </div>

4. 半角スペース2つ
<div>  </div>

5. 改行
<div>
</div>

6. コメント
<div><!-- comment --></div>

7. テキストなしで空の子要素を持つ
<div><span></span></div>

正解は2と6です。
実際の動作はサンプルをどうぞ。

:empty?

:empty擬似クラスは「Selectors Level 3」を見ると、次のように書かれています。

The:emptypseudo-class represents an element that has no children at all. In terms of the document tree, only element nodes and content nodes (such as DOM [DOM-LEVEL-3-CORE] text nodes, CDATA nodes, and entity references) whose data has a non-zero length must be considered as affecting emptiness; comments, processing instructions, and other nodes must not affect whether an element is considered empty or not.

• :emptyである要素は子を持たない。
• DOMテキストノード、CDATAノード、実体参照などの要素内容データの長さがゼロでない場合、それは要素が空であるかどうかに影響を及ぼす。
• コメント、処理命令、その他のノードは要素が空であるかどうかに影響を及ぼしてはならない。

大雑把にまとめるとこんな感じです。

「中身は空だけどどうしても改行とか入っちゃう場合はどうすりゃいいのよ」ということがあるかもしれません。
これについては現在はどうしようもありませんが、「Selectors Level 4」ではどうにかなったりします。

2013年4月のCSSWGで「:empty擬似クラスは多くの人にとってあんまり便利じゃないよね」という話が出ていて、ホワイトスペースのみまたは空の（:emptyと同じ）要素にマッチする擬似クラスが提案されました。
[CSSWG] Minutes Telecon 2013-04-10 from fantasai on 2013-04-11 (www-style@w3.org from April 2013)
（:voidとか:this-element-intentionally-left-blankとか出てて結構面白いです）

そして2013年5月2日版の「Selectors Level 4」で:blankが追加されました。
基本的には:emptyと同様ですが、それに加えてホワイトスペースは空であるかどうかに影響を及ぼさない、というものです。
最初の例で言うと、2～6は:blankにマッチします。
ホワイトスペースとして許可される文字については「CSS Text Module Level 3」を参照して下さい。

今のところ:blankを実装しているブラウザはありませんし使用場面もそんなにないと思うのですが、一応頭に入れておくといいかもしれません。