CSS emptyで中身が空の要素にCSSを適用する
環境
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)になります。