2021/2/18 HTML&CSS辞典をオープンしました! コンテンツは随時更新します!

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

疑似セレクタ(:empty)の評価
頻出度
(3.0)
重要度
(3.0)
総合評価
(3.0)




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日」の空白セルの背景色を赤色で表示させます。

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




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です