CSS emptyで中身が空の要素にCSSを適用する

2022年11月7日

環境
Google Chrome　106.0.5249.119
Windows 10 Home 64bit

構文
td:empty{
CSsコード
}
td中身が空の要素にCSSが適用されます。
要素:empty
:empty は CSS の擬似クラスで、子を持たない要素を表します。子とは要素のノードまたは文字列 (ホワイトスペースを含む) です。
コメント、処理指示、 CSS の content は要素が空であるかどうかの判断には影響しません。

使用例

<!DOCTYPE html>
<html>
<head>
<style>
  table {
    table-layout: auto;
    border-collapse:collapse;
    width: 110px;
  }
  /*empty中身が空の要素*/
  td:empty {
    height: 30px;
    background-color: skyblue;
    border: 1px solid red;
  }
</style>
</head>
<body>

<table >
  <tr><td>tokyo</td></tr>
  <tr><td></td></tr>
  <tr><td><!-- コメント --></td></tr>
  <tr><td>oosaka</td></tr>
</table>
</body>
</html>

結果
テーブルの第2行目(中身が空)、第3行目(コメント)の背景色(skyblue)になります。

CSS

Posted by arkgame