>
> !.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)
...