擬似クラス empty
擬似クラス empty は、空の要素(テキストを含まない要素)の見た目を設定します。
構文
セレクタ:empty {
}
例
この例では、最後の li は空ですが、それでもマーカーを持ちます:
<ul>
<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>
<li></li>
</ul>
:
例
空の li タグの動作を変更します:
<ul>
<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>
<li></li>
</ul>
li:empty {
border: 1px solid blue;
list-style-type: circle;
color: blue;
width: 100px;
}
:
例
空の li を完全に非表示にします:
<ul>
<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>
<li></li>
</ul>
li:empty {
display: none;
}
:
関連項目
-
プロパティ
empty-cells,
これはブラウザにテーブルの空セルの背景と境界線をどのように表示するかを指定します