A quick note about the :empty pseudo-class

14 March 2010, in CSS, HTML, Project 52 | 20 comments »

I’m in love with the simplicity that CSS3 selectors can bring to our stylesheets. Here’s a brief explanation of one of my favourites: the :empty pseudo-class.

What is the :empty pseudo-class

Here is the definition taken from the W3C Selectors Level 3 specification:

The :empty pseudo-class represents an element that has no children at all.

Seems easy enough, right? That’s because it is. The :empty pseudo-class is going to target elements that are completely empty; for example, an empty paragraph:

<p></p>

Or an empty table cell:

<table>
<tr>
<td></td>
</tr>
</table>

It won’t target this paragraph though (there is a space within the p tag, therefore it isn’t empty):

<p> </p>

A practical example

So when can this selector be useful?

Image you’re styling a table and some of the data cells have no content — you can style them differently using the magic :empty pseudo-class.

Let’s take the table I’ve created for the Adding Style with CSS: A Beautiful Table article. I’m going to use the same CSS, but change the data to make it simpler (the data I’ve added makes no sense, but you get the point…). I’m also going to remove the content in a few cells, to make this example relevant.

So this is our markup:

<table>

	<caption>A simple table</caption>
    
	<thead>    
		<tr>
			<th scope="col" rowspan="2">Some headings</th>
			<th scope="col" colspan="4">More headings</th>
		</tr>
		<tr>
			<th scope="col">Great</th>
			<th scope="col">Brilliant</th>
			<th scope="col">Genius</th>
			<th scope="col">Good</th>
		</tr>        
	</thead>

	<tfoot>
		<tr>
			<th scope="row">Interesting totals</th>
			<td>155</td>
			<td>165</td>
			<td>70</td>
			<td>140</td>
		</tr>
	</tfoot>
    
	<tbody>
		<tr>
			<th scope="row">Curious</th>
			<td>5</td>
			<td>35</td>
			<td>50</td>
			<td>15</td>
		</tr>
		<tr>
			<th scope="row">Awesome</th>
			<td>75</td>
			<td>90</td>
			<td></td>
			<td>5</td>
		</tr> 
		<tr>
			<th scope="row">Fabulous</th>
			<td>30</td>
			<td></td>
			<td>20</td>
			<td>80</td>
		</tr>
		<tr>
			<th scope="row">Nice</th>
			<td>45</td>
			<td>40</td>
			<td></td>
			<td>40</td>
		</tr>
        
	</tbody>

</table>

This is what I’m going to add to the CSS:

tbody td:empty {
	background: #EFEFEF;
	}

And now the empty cells are styled differently! I don’t think this could have been much easier.

Also, if you really need to ask, this selector works on the latest versions of Firefox, Safari, Chrome and Opera. It will probably work on Internet Explorer 9, like most CSS3 selectors will. (The first person to point out the obvious, will be directed to this link. — Thanks, Jack, for helping me remember the link!)

Here’s the example:

View example

So, will you be using this selector any time soon?

There are 20 comments:

  1. Like most of these new selectors – it’s great to know it is there. I won’t be using it yet, but I can see this being super useful when working with data-driven sites. Your table example is ideal.

    (And it’s spelt “genius” – sorry!)

  2. inayaili says:

    Thanks, …

    (grammar Nazi) :)

  3. What a neat idea, gosh these selectors are coming on well. I will be using this.

    Thanks for making the time to do this.

  4. Andy Walpole says:

    The biggest problem with this pseudo-class is that even white space will prevent it from working… it could be confusingly buggy

  5. Nice article, Yaili. I always shy away from using tables, which a lot are probably guilty of. I’m going to download this demo to check this out more. :-)

    • Tay says:

      You always shy away from using tables? What? even for tabular data such as league tables? Tables have their place in markup as long as they are not being used to layout/presentational purposes.

      • Well, obviously it depends on what type of Website Design you are doing. The type of websites I have most experience doing are layout/presentational ones, like you stated there.

        • Bryan Watson says:

          I believe what Tay is trying to say, is that tables are perfectly fine to be used with ‘tabular’ data, and not for the general design and / or layout of a website.

          Information that could logically be presented in a spreadsheet can and should be marked up inside of a table.

          • Yeah I do agree, totally. What I meant by my initial comment was that because I don’t really do many sites of that nature, I don’t really spend much time playing about with table CSS styling like this (and I should).

  6. This is one CSS3 selector I haven’t yet tried. Pretty cool. Thanks!

  7. Bryan Watson says:

    FYI, Dean Edwards IE7.js project recently released an update (IE9.js) that will add support for the :empty selector in IE6+

    http://code.google.com/p/ie7-js/

  8. Jack Osborne says:

    That is really cool, I’m loving your pseudo articles Yaili, learning a lot from them.

  9. Alan says:

    Nice wee blog post there, never actually thought about this before.

  10. Keith Clark says:

    The :empty pseudo is also supported by ie-css3 for IE5.5 – 8

    http://www.keithclark.co.uk/labs/ie-css3/

  11. Susanto says:

    i’ve really learning a lot from this blog.

  12. Jonathon says:

    Where whitespace is a fail is when for whatever reason a cms driven site has not a ‘ ‘ but an empty tag with opening and closing tags on separate indented lines. This is also oftentimes reading as non empty.

    Whether you use tables or not the :empty pseudo is still of use in layout. Columnar text for instance, flex boxes, lists, and I think from a CMS standpoint these benefits start to become apparent for many non-tabular instances.

  13. Nice explanation with right example.

  14. Laszlo says:

    I think I found a blog, that I’ll follow :)

  15. Virgilio says:

    Help me figure out this problem. The empty element could not have a background color of red.

    Apple

    Mango

    table td:empty{
    background-color:red;
    }

Leave a comment: