:empty (CSS selector)

Spec
Version
CSS3
Browser support (more…)
IE8 FF3+ SA3.1+ OP9.5+ CH2+
None Full Full Full Full

Syntax

:empty {
declaration block
}

Description

This pseudo-class matches elements that have no children. Element nodes and non-empty text nodes are considered to be children; empty text nodes, comments, and processing instructions don’t count as children. A text node is considered empty if it has a data length of zero; so, for example, a text node with a single space isn’t empty.

Example

The selector p:empty will match the first paragraph, but not the second or third, in this example:

<p></p>
<p> </p>
<p>Hello, World!</p>

Compatibility

Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
None None None None Buggy Buggy Buggy Full Full Buggy Buggy Full Full None Full Full Full

In Firefox versions up to and including 2:

  • The selector body:empty always matches the body element.
  • The selector continues to match an element even after content has been added dynamically.

In Safari versions up to and including 2, when it appears in an internal style sheet (using <style> tags), this selector will always match. If this selector is used within an external style sheet, it works as designed.

Previous / Next page

  1. Previous
  2. Next

User-contributed notes

There are no comments yet.

Add a note

To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.

Related Products