:empty
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
* Some parts of this feature may have varying levels of support.
:empty là lớp giả trong CSS đại diện cho bất kỳ phần tử nào không có con. Con có thể là các nút phần tử hoặc văn bản (bao gồm khoảng trắng). Các chú thích, chỉ thị xử lý và content của CSS không ảnh hưởng đến việc một phần tử được xem là rỗng hay không.
Try it
div:empty {
outline: 2px solid deeppink;
height: 1em;
}
<p>Element with no content:</p>
<div></div>
<p>Element with comment:</p>
<div><!-- A comment --></div>
<p>Element with nested empty element:</p>
<div><p></p></div>
Note:
Trong Selectors Level 4, lớp giả :empty đã được thay đổi để hoạt động như :-moz-only-whitespace, nhưng hiện tại chưa có trình duyệt nào hỗ trợ điều này.
Cú pháp
:empty {
/* ... */
}
Khả năng tiếp cận
Các công nghệ hỗ trợ như trình đọc màn hình không thể phân tích nội dung tương tác rỗng. Tất cả nội dung tương tác phải có tên có thể tiếp cận, được tạo bằng cách cung cấp giá trị văn bản cho phần tử cha của điều khiển tương tác (liên kết, nút, v.v.). Tên có thể tiếp cận hiển thị điều khiển tương tác cho cây khả năng tiếp cận, một API truyền đạt thông tin hữu ích cho các công nghệ hỗ trợ.
Văn bản cung cấp tên có thể tiếp cận của điều khiển tương tác có thể được ẩn bằng tổ hợp các thuộc tính giúp loại bỏ nó về mặt hình ảnh khỏi màn hình nhưng vẫn có thể được phân tích bởi công nghệ hỗ trợ. Điều này thường được sử dụng cho các nút chỉ dựa vào biểu tượng để truyền đạt mục đích.
Ví dụ
HTML
<div class="box"><!-- I will be lime. --></div>
<div class="box">I will be pink.</div>
<div class="box">
<!-- I will be pink in older browsers because of the whitespace around this comment. -->
</div>
<div class="box">
<p>
<!-- I will be pink in all browsers because of the non-collapsible whitespace and elements around this comment. -->
</p>
</div>
CSS
.box {
background: pink;
height: 80px;
width: 80px;
}
.box:empty {
background: lime;
}
Kết quả
Đặc tả
| Specification |
|---|
| Selectors Level 4 # the-empty-pseudo |
Tương thích trình duyệt
Xem thêm
:-moz-only-whitespace— Triển khai có tiền tố của các thay đổi trong Selectors Level 4:blank