Định nghĩa và sử dụng

  • ":empty" chọn thành phần rỗng, không chứa text hay thành phần khác.

Cấu trúc

:empty {
    property: value; 
}

Ví dụ

HTML viết:

<html>
<head></head>
<body>
<p></p>
<p>Thành phần p có chứa text</p>
<div>Thành phần div</div>
</body>
</html>

Hiển thị trình duyệt khi chưa có CSS:

Thành phần p có chứa text

Thành phần div

CSS viết:

p:empty{
    background: blue;
    height: 20px;
    width: 100px;
}

Hiển thị trình duyệt khi đã có css:

Thành phần p có chứa text

Thành phần div

Ta thấy những thành phần <p> ở vị trí sau thành phần <ul> đều đã được chọn, ngoại trừ thành phần <p> ở vị trí trước thành phần <ul> và thành phần <p> ở vị trí khác cấp với thành phần <ul>.

Trình duyệt hỗ trợ

  • Internet Explorer
  • Firefox
  • Opera
  • Google Chrome
  • Safari

":empty" được hỗ trợ trong đa số các trình duyệt, ngoài trừ trình duyệt Internet Explorer 8 trở xuống.