Re: [css4-selectors] Focused descendant pseudo class

On 25/1/12 21:45, Rudolph Gottesheim wrote:
> A while ago I asked[1] the www-style list for a solution to selecting
> the parent of a focused form input, which (once again) kicked off the
> discussion about a parent selector (which is still no option, as far as
> I can tell).
>
> Now I've come across another use case and probably another solution to
> the same problem:
>
> Suppose you have a form with a text input and a submit button. Now you
> want to hide the submit button to un-clutter the interface, but show it
> as soon as the user focuses the input element.
>
> <form>
> <input />
> <input type=submit />
> </form>
>
> form input[type=submit] {
> display: none;
> }
>
> Would it be possible to implement a "some descendant of this element is
> in focus" selector? Something like :focused-child oder :contains-focus.
>
> form:contains-focus input[type=submit] {
> display: block;
> }
>
> [1] http://lists.w3.org/Archives/Public/www-style/2011Oct/0275.html
>

AFAIK the WG is planning to explore a way to set a different subject for 
a selector by appending an exclamation mark (!) after it [1] in Selectors 4.

So your case would be form! input[type=submit]:focus { ... }

[1]: http://dev.w3.org/csswg/selectors4/#subject

-- 
Lea Verou (http://lea.verou.me | @LeaVerou)

Received on Wednesday, 25 January 2012 19:58:34 UTC