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

When I worked on some sort of a duty calendar I used (by design request)  
following:
.title:empty:after { content: 'free'; color: gray; }

Generally I don't recommend to use " " or something in empty elements  
because
it doesn't have use nowadays and produce unneccesary output on copy or  
something else.


On Tue, 02 Nov 2010 17:56:47 +0300, Rob Crowther <robertc@boogdesign.com>  
wrote:

> 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 15:07:59 UTC