[css-selectors] :focus and :checked

People can do a lot with the 'checkbox hack' and I see designers all the
time bend over backwards trying to manage this so that labels are in
sibling relationships, but this is occasionally impractical or even
impossible.  In other words, given


<div>
   <label for="x">Blah</label>
</div>
<input type="checkbox" id="x">

You're screwed. Labels proxy their clicks to set focus on their input or
check a checkbox or select a radio button, but there's no bi-directional
relationship. I know that this has come up in the past, but in the past it
looks like there were mostly concerns about things like :hover[1] because
of perf, or ideas that other things like subjects/reference combinators
would solve the problem another way.  The latter doesn't seem like it is
gonna happen soon and the former is only part of the problem - maybe the
least useful one.

:focus and :checked are certainly more 'rare' events and it feels like at
least maybe those we could afford to support-bidirectionally.  If
developers were able to style a label when the input were :checked or
:focused that seems like it would be a small, but powerful win that would
open lots of new possible doors.

Can we do this?


[1]
https://lists.w3.org/Archives/Public/public-whatwg-archive/2014Nov/0076.html
-- 
Brian Kardell :: @briankardell

Received on Tuesday, 2 August 2016 19:38:03 UTC