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
• To: Elliott Sprehn <esprehn@gmail.com>, Tab Atkins Jr. <jackalmage@gmail.com>
• CC: "www-style@w3.org" <www-style@w3.org>
• Message-ID: <DUB002-W24482535343AD3DCFD2753A5D40@phx.gbl>

>
> !.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>
   </div>

(a) 

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

(b)

   a#outside:min-width(480px)
   a#outside /href/:min-width(0px)
   ... 		 	   		  

Received on Friday, 22 March 2013 00:15:05 UTC