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

完全な空要素もしくはコメントアウトのみ

• ※完全な空要素はもちろん適用される
• ※コメントアウトのみであっても適用される

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

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

改行や半角スペース

• ※見た目上は空であっても、改行や半角スペース、改行を含んだコメントアウトは空要素とはみなされない

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

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

デモの解説記事に戻る