- From: Florian Rivoal <florian@rivoal.net>
- Date: Tue, 6 Jan 2015 23:09:55 +0100
- To: James Craig <jcraig@apple.com>
- Cc: Fred Esch <fesch@us.ibm.com>, W3C WAI Protocols & Formats <public-pfwg@w3.org>, www-style list <www-style@w3.org>
> On 06 Jan 2015, at 22:36, James Craig <jcraig@apple.com> wrote:
>> I was under the impression that this would be solved by the subject selector. Does this addition mean that the following two selectors are equivalent?
>>
>> !* *:focus {}
>> *:focus-within {}
>>
>> The readability of the second is more apparent, but the subject selector is much more powerful. If you include both, I'd make a note in :focus-within that it's equivalent to "!* *:focus"
>>
> Nevermind. I see that the subject selector has been removed from CSS4. :(
"!" is dead, long live ":has()" [1]
So you'd write *:has( *:focus ) {}
However:
1) :has() is not part of the "fast profile" [2], meaning :has is not available for CSS selection, only for things like query() method, so it cannot be used here.
2) Even if it could, :has() would not pierce through shadow roots (unless you write it out explicitly, but things get hairy then), which :hover and :active do, and is desirable here.
3) Moreover, :focus-within (like :hover and :active) also propagates the state between a labeled control and its label. Note that there is an open discussion as to whether this should be bidirectional or not. The CSSWG feels it should be, but the HTML spec (which is where this is normatively defined) currently only propagates from the label to the control. CSSWG resolution here [3], unfinished WHATWG thread here [4].
- Florian
[1] http://dev.w3.org/csswg/selectors/#relational
[2] http://dev.w3.org/csswg/selectors/#profiles
[3] http://www.w3.org/mid/CADhPm3viL81K8_B29m74pKZAsNdZz2zxHvjBeiKpfs58V5rYtg@mail.gmail.com
[4] http://lists.w3.org/Archives/Public/public-whatwg-archive/2014Nov/0147.html
Received on Tuesday, 6 January 2015 22:10:24 UTC