[css3-selectors] What's the point of :empty?

Hi All

I have two questions, the second one came up in the context of my 
investigation of :empty, I'm not sure they're related.

Here are four divs:

     <div class="one"></div>
     <div class="two"> </div>
     <div class="three">
     </div>
     <div class="four">&nbsp;</div>

The selector 'div:empty' only selects div one, because all the others
end up with an all whitespace text node as a child.  If I wanted to do
something like:

     div:empty { display: none; }

I would have to rely on no content authors accidentally introducing a
whitespace character between the two tags at any point, in their editor
or using some sort of tidy tool.  This seems a bit fragile.

Of course, the only time I've ever wanted to use :empty it didn't work
because the 'empty' elements had &nbsp; in them.  I was trying to set a
fixed height on a set of elements to lay them out in a grid, but hide
the elements that had no content so there weren't any gaps.  It seems to
me a lot of content generators use &nbsp; as a synonym for 'no content',
perhaps dating back to the days of issues with empty table cells not
being stylable.

So are there any real, useful cases where :empty can be applied, or am I 
thinking about it wrong?

The second question is to do with the above four divs and how the 
content affects layout.  Have a look at this example:

http://www.boogdesign.com/examples/css3/empty.html

The top row has the divs set to display: inline-block, the bottom row
has them float: left.  The last div (with the &nbsp;) appears below all
the others on the top row in Firefox, Chrome and Opera (so I assume
that's correct behaviour), but why?  Something to do with text alignment?

And why would it affect div four, but not two or three?

And, finally, if there is a layout impacting difference between two,
three and four based on their contents, why is there not a selector I
can target them with?  (Or is there?)

Rob

Received on Tuesday, 2 November 2010 14:55:52 UTC