Skip to: content, navigation

:empty (CSS selector)

Spec
Version
CSS3
Browser support (more…)
IE7 FF1+ SA3+ OP9.5+
None Buggy 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
5.5 6.0 7.0 1.0 1.5 2.0 1.3 2.0 3.0 9.2 9.5
None None None Buggy Buggy Buggy Buggy Buggy Full None 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.

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

Search