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

On 11/2/10 10:56 AM, Rob Crowther wrote:
> The selector 'div:empty' only selects div one, because all the others
> end up with an all whitespace text node as a child.

For what it's worth, this is why Gecko has a :-moz-only-whitespace (that 
we mostly use in our quirks-mode stylesheet)....

> The top row has the divs set to display: inline-block, the bottom row
> has them float: left. The last div (with the  ) 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?

For purposes of CSS, divs one, two, and three end up with no child boxes 
(because all the whitespace is trimmed).  The relevant part of the spec 
is this section 10.8.1 last paragraph:

   The baseline of an 'inline-block' is the baseline of its last line
   box in the normal flow, unless it has either no in-flow line boxes or
   if its 'overflow' property has a computed value other than 'visible',
   in which case the baseline is the bottom margin edge.

Since the default vertical-align value is baseline, this lines up the 
bottom margin edge of blocks 1-3 with the baseline of the last (and 
only) line of text in block 4, which is near the top of the block.

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

Note that there can also be layout differences between blocks 1, 2, and 
3, depending on the styles applied; try setting |#one > div { 
white-space: pre; }|....

-Boris

Received on Tuesday, 2 November 2010 15:16:07 UTC