CSS3 guide: 3.9. empty pseudo selector

This is a post in a series, please see the Table of Contents [webmasterworld.com] for the other posts in the series.

3.9. empty pseudo selectors

The empty [w3.org] pseudo selector select elements that have no children at all (including no text in it).

Syntax: E:empty

selects the only elements which have no children nor text content.

Example 1:
A first example tests the :empty pseudo selector and when it springs in action


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>test</title>
    <style type="text/css">
      p.hitme {
        height: 50px;
        width: 50px;
        background-color:red;
      }
      p.hitme:empty {
        background-color:green;
      }
    </style>
  </head>
  <body>
    <p>test: &lt;p&gt;&lt;/p&gt;</p>
    <p class="hitme"></p>
  
    <p>test: &lt;p&gt;&lt;!-- comment --&gt;&lt;/p&gt;</p>
    <p class="hitme"><!-- comment--></p>
    
    <p>test: &lt;p /&gt;</p>
    <p class="hitme" />
    
    <p>test: &lt;p&gt; &lt;/p&gt;</p>
    <p class="hitme"> </p>
      
    <p>test: &lt;p&gt;<br />&lt;/p&gt;</p>
    <p class="hitme">
</p>
      
    <p>test: &lt;p&gt;&lt;span&gt;&lt;/span&gt;&lt;/p&gt;</p>
    <p class="hitme"><span></span></p>
  </body>
</html>

Example 2:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title> Page Title </title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <style type="text/css" media="screen">
      .search {
        background: #abc; 
        margin: 20px; 
      }
      h2 {
        color: #abc;
        font: bold 18px/2 "trebuchet ms", georgia, serif; 
      }
      p {
        margin: 0.5em 0; 
      }
      #test *:empty {
        display: none; 
      }
    </style>
<!--[if lt IE 9]>
    <script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        $(":empty").addClass('isempty');
      });
    </script>
    <style type="text/css" media="screen">
      #test *.isempty {
        display: none; 
      }
    </style>
<![endif]-->
  </head>
  <body>
    <div class="search"><input type="text" name="search" id="search"></div>
    <h2>Article Heading</h2>
    <p>A Normal Paragraph</p>
    <hr>
    <div class="search"></div>
    <h2></h2>
    <p></p>
    <hr>
    <div id="test">
      <div class="search"></div>
      <h2></h2>
      <p></p>
    </div>
    <hr>
  </body>
</html>

What you should see is that the gap between the 1st and 2nd <hr> is bigger than that of the one between the 2nd and 3rd because the margins in the first non-hidden example are still being shown, albeit collapsed

Support:

Supported in most standard compliant browsers
Not supported by IE (including IE8)

Graceful fallback:
As always this is hard to do with selectors.

IE8.js adds support for :empty and offers the same functionality in IE7 and IE6.

jQuery can be used as a graceful fallback for all IE versions, admittedly JavaScript is required but it's intuitive for CSS users as seen in the second example.

Practical use:
With today's increase in usage of CMS's and Rich Text editors along with them, it is quite plausible that both the dynamically generated site code and the user input via the editor will contain empty divs, headings, or paragraphs. If these empty elements are having margins already applied to them via the existing CSS this can throw out the design. code like:

div:empty, h2:empty, p:empty {display: none;}

would help remove said empty elements from the flow.

Note:
Note that the empty test is quite strict, e.g. <p /> would be as empty as one could imagine in xhtml, but it's not matching on this in either Firefox, Safari or Opera at the time I wrote this.

[edited by: swa66 at 6:42 pm (utc) on July 3, 2009]

CSS3 guide: 3.9. empty pseudo selector

swa66

swa66

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week