:empty と :blank (仮) 擬似クラス

Category : CSS

次の 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 :empty pseudo-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 を実装しているブラウザはありませんし使用場面もそんなにないと思うのですが、一応頭に入れておくといいかもしれません。

Leave a Reply