【意外と便利！】要素の中身が空の時に適用できる疑似要素: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の挙動についてまとめてみました。どうぞ本記事がご参考になれば幸いです。

• 【写真整理にも使える！】ファイルの日時や属性を一括で変更できる「Neo FileTimeChange」の使い方
• 【Amazon利用者におすすめ！】エポスカードのポイントをAmazonギフト券に交換してみた

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

• WebGoogleアナリティクスにて変動IPアドレスからのアクセスを除外する方法
• Web【お得に解約！】ワイモバイルのWiFiルーターは更新月の1日に解約すれば当月分は無料に！
• Web【羽田周辺の駐車場をお探しの方へ！】羽田空港近くの駐車場「パーク&ライド羽田」を使ってみたのでレビュー
• Web【jsの落とし穴】sort()によるソート実装を行うとChromeで正しくソートされない件について
• WebGoogle AdsenseにてAmazonと楽天の広告ブロックを解除してみた結果
• Web【超簡単！】Sublime Text3にSCSSパッケージをインストールしてSassファイルをサクサク編集するまでの手順

「Web」の他の記事を読む

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