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

RE: The :min-width/:max-width pseudo-classes

From: François REMY <francois.remy.dev@outlook.com>
Date: Fri, 22 Mar 2013 01:14:32 +0100
Message-ID: <DUB002-W24482535343AD3DCFD2753A5D40@phx.gbl>
To: Elliott Sprehn <esprehn@gmail.com>, Tab Atkins Jr. <jackalmage@gmail.com>
CC: "www-style@w3.org" <www-style@w3.org>
> !.foo .viewport .list:max-width(...)

I don't know how this selector is evaluated in browsers, but my understanding of it is 

   .foo:has(:this .viewport .list:max-width(...))

and it means that :max-width will match no ".list" element per rule 1 (:min-width only matches elements that are the nearest viewport or one of its ancestors)

> !.foo + .viewport .list:max-width(...) { display: table; } 

Again, if this is seen as

   .foo:has(:this + .viewport .list:max-width(...))

then no .list will ever match :max-width because none of them will be ancestror of the .foo element.

> (...reference selectors...)

In this case too, :min-width will only match if the referenced element is an already-computed element (the nearest viewport or one of its ancestors). So (a) should work and (b) should fail:

   <a id="outside" href="#inner"></a>
   <div id="outer">
      <div id="viewport">
          <a id="inner" href="#outer">...</a>


   div#outer:min-width(480px) a#inner { ... }
   !a /href/:min-width(480px) { ... }
   :min-width(480px) > a#inner { ... }


   a#outside /href/:min-width(0px)
Received on Friday, 22 March 2013 00:15:05 UTC

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