[CSS] 疑似セレクタ「:empty」で子要素を持たない要素にスタイルを適用しよう!

1.疑似セレクタ「:empty」とは?

疑似セレクタ「:empty」は子要素を持たない要素にスタイルを適用します。

この場合の子要素は要素内テキストも含まれます。

2.疑似セレクタ「:empty」の使い方

それでは疑似セレクタ「:empty」の使い方をみていきましょう。

・・・

<table>
 <tr>
  <td>1月1日</td>
  <td>1月2日</td>
  <td>1月3日</td>
  <td>1月4日</td>
  <td>1月5日</td>
 </tr>
 <tr>
  <td>×/td>
  <td>×</td>
  <td>×</td>
  <td></td>
  <td>×</td>
 </tr>
</table>

・・・

td:empty {
 background-color: red;
}

上記の例では空のtd要素を対象にスタイルを適用し、表の「1月4日」の空白セルの背景色を赤色で表示させます。

疑似セレクタはなかなかイメージしづらいので実際に使ってみてどのようにスタイルが適用されるか確認するといいかと思います。