W3C home > Mailing lists > Public > www-style@w3.org > March 2012

Re: :first pseudo-selector

From: Marat Tanalin | tanalin.com <mtanalin@yandex.ru>
Date: Thu, 22 Mar 2012 23:06:06 +0400
To: Simon Sapin <simon.sapin@kozea.fr>
Cc: "www-style@w3.org" <www-style@w3.org>
Message-Id: <790771332443166@web58.yandex.ru>
22.03.2012, 22:51, "Simon Sapin" <simon.sapin@kozea.fr>:
> Le 22/03/2012 19:37, Marat Tanalin | tanalin.com a écrit :
>>  Let assume we have a container with blocks inside it, and each block can have margin-top and margin-bottom, and each block can contain another blocks inside them, and nesting level can be arbitrary and is unknown in advance.
>>  It would be nice to have ability to zeroize margin-top for first child, and first child of it, first child of first child of first child, etc. at once. Same applies for last child.
>>  Currently, AFAIK, we can only match children up to some_exact_  nesting level known in advance (3 in the example below):
>>       .container>  :first-child,
>>       .container>  :first-child>  :first-child,
>>       .container>  :first-child>  :first-child>  :first-child {}
>>  We cannot use just :first-child context selector since it would also select first children of blocks that are not first children themselves.
>>  So we need a sort of_recursive_  selector that matches not just first of last child, but recursively matches all first-most and last-most elements regardless of their nesting level.
>>  A possible syntax is quite straightforward:
>>       :first-child-recursive {margin-top: 0; }
>>       :last-child-recursive  {margin-bottom: 0; }
> Hi,
> Isn’t this handled by margin collapsing?
> Example:
> <style>
>      div { background: #ccc }
>      p { margin: 2em 0 }
> </style>
> <div>
>      <p>a</p>
>      <p>b</p>
>      <p>c</p>
> </div>
> Because of margin collapsing, the top margin for "a" and the bottom
> margin for "c" collapse with the (zero) margins of the div and end up
> outside of the div, ie. outside of the background.

Margin collapsing does not allow us to zeroize margins of all children of children of all levels.

Margin collapsing isn't helpful where 'root-ancestor' block has (for example) vertical padding which prevents margin-collapsing of its children. Such situation is quite typical for example for main layout blocks like #content.
Received on Thursday, 22 March 2012 19:06:36 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:13 UTC