Pseudo-class empty
Pseudo-class empty thiết lập cách một
phần tử trống (không chứa văn bản) sẽ hiển thị.
Cú pháp
bộ chọn:empty {
}
Ví dụ
Trong ví dụ này, li cuối cùng là trống,
nhưng vẫn sẽ có điểm đánh dấu:
<ul>
<li>mục danh sách</li>
<li>mục danh sách</li>
<li>mục danh sách</li>
<li>mục danh sách</li>
<li></li>
</ul>
:
Ví dụ
Hãy thay đổi kiểu cho thẻ li trống:
<ul>
<li>mục danh sách</li>
<li>mục danh sách</li>
<li>mục danh sách</li>
<li>mục danh sách</li>
<li></li>
</ul>
li:empty {
border: 1px solid blue;
list-style-type: circle;
color: blue;
width: 100px;
}
:
Ví dụ
Ẩn hoàn toàn các li trống:
<ul>
<li>mục danh sách</li>
<li>mục danh sách</li>
<li>mục danh sách</li>
<li>mục danh sách</li>
<li></li>
</ul>
li:empty {
display: none;
}
:
Xem thêm
-
thuộc tính
empty-cells,
chỉ định cho trình duyệt cách hiển thị nền và đường viền của các ô bảng trống
