芝生やDIY等のライフハックやWeb制作情報を発信するメディア

メニューを開く

要素の中身が空の時に適用できる疑似要素: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;
}

デモの解説記事に戻る

ページの先頭に戻る