【意外と便利！】要素の中身が空の時に適用できる疑似要素:emptyの挙動についてまとめてみた

Web2018年5月28日

空要素に対して適用できるcssの疑似要素「:empty」は、動的なページで要素の中身が出力された場合のみセレクタを表示させたい場合や、table要素で空要素のみ背景色を変えたい時など、使いどころによってはとても便利です。使用機会のあまり無い疑似要素ですが、使用する際は若干注意すべきポイントもあるので、本記事では疑似要素「:empty」の挙動についてまとめてみました。

サンプルコード

完全な空要素もしくはコメントアウトのみ適用される

実は見た目上空要素に見えても、改行や半角スペースなどが1つでもあると:emptyの対象とはなりません。以下の場合のみ、:emptyで指定したスタイルは適用されます。

完全な空要素
コメントアウトのみ

疑似要素:emptyの対象となるパターン

<table class="tbl-01">
<tbody>
<tr>
<td></td>
<td><!--コメントアウト--></td>
</tr>
</tbody>
</table>

table.tbl-01 td:empty{
  background:#f00;
}

疑似要素:emptyの対象とならないパターン

以下のように半角スペースや改行が入っていると、:emptyのスタイルは適用されません。

<table class="tbl-01">
<tbody>
<tr>
<td>
</td>
<td> </td>
<td>
<!--コメントアウト-->
</td>
</tr>
</tbody>
</table>

table.tbl-01 td:empty{
  background:#f00;
}

デモ

実際に動作を確認できるデモページも公開しておりますのであわせてご確認ください。

要素の中身が空の時に適用できる疑似要素:emptyの挙動についてまとめてみた

まとめ

疑似要素:emptyは、システム上の制約でどうしても要素が空になってしまうケースを想定しなければならない場合など、条件や使い所によってはとても便利な疑似要素です。

また、jsonやxmlで取得した情報をDOM生成する際に、「表示条件にマッチしなかった場合に要素ごとdisplay:none;にする」処理をjsで行うことがありますが、こういったケースでも:emptyを活用することで、非表示処理をcss側に行わせたりもできます。

以上、疑似要素:emptyの挙動についてまとめてみました。どうぞ本記事がご参考になれば幸いです。

この記事を読んでいる方にオススメの記事

「Web」の他の記事を読む

この記事にコメントする

※承認制のため、即時には反映されません。