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:


Or an empty table cell:


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:


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

			<th scope="row">Interesting totals</th>
			<th scope="row">Curious</th>
			<th scope="row">Awesome</th>
			<th scope="row">Fabulous</th>
			<th scope="row">Nice</th>


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?

  • http://zeroedandnoughted.com Antony Kennedy

    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!)

  • http://yaili.com inayaili

    Thanks, …

    (grammar Nazi) :)

  • http://twitter.com/Dazzclub Darren Azzopardi

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

    Thanks for making the time to do this.

  • http://www.suburban-glory.com/areas/page-one.html Andy Walpole

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

    • http://zeroedandnoughted.com Antony Kennedy

      @Andy Walpole

      I think whitespace preventing it from working is absolutely correct behaviour. It means there is a text node, and so it is not empty.

  • http://www.markmccorkell.com Mark McCorkell

    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. :-)

    • http://www.jtwd.co.uk Tay

      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.

      • http://www.markmccorkell.com Mark McCorkell

        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.

        • http://www.bryanwatson.ca Bryan Watson

          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.

          • http://www.markmccorkell.com Mark McCorkell

            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).

  • http://azzcatdesign.com Catherine Azzarello

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

  • http://www.bryanwatson.ca Bryan Watson

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


  • http://jackosborne.co.uk Jack Osborne

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

  • http://www.alan-horne.com Alan

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

  • http://www.keithclark.co.uk Keith Clark

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


  • Susanto

    i’ve really learning a lot from this blog.

  • Jonathon

    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.

  • http://sushilbharwani.blogspot.com sushil bharwani

    Nice explanation with right example.

  • Laszlo

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

  • Virgilio

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



    table td:empty{