W3C home > Mailing lists > Public > www-style@w3.org > November 2010

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

From: GreLI <greli@mail.ru>
Date: Tue, 02 Nov 2010 18:07:23 +0300
To: "Rob Crowther" <robertc@boogdesign.com>
Cc: "www-style@w3.org" <www-style@w3.org>
Message-ID: <op.vljtmlbs5jkyg2@greli.mlan>
When I worked on some sort of a duty calendar I used (by design request)  
.title:empty:after { content: 'free'; color: gray; }

Generally I don't recommend to use "&nbsp;" or something in empty elements  
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>  

> 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

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:38:40 UTC