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

環境
Google Chrome 106.0.5249.119
Windows 10 Home 64bit

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

使用例

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!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>
<!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>
<!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