- From: Marat Tanalin | tanalin.com <mtanalin@yandex.ru>
- Date: Thu, 26 Jan 2012 01:34:57 +0400
- To: Rudolph Gottesheim <r.gottesheim@loot.at>
- Cc: www-style@w3.org
25.01.2012, 23:45, "Rudolph Gottesheim" <r.gottesheim@loot.at>:
> 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
One of most demanded CSS features currently missing.
By the way, we could elegantly and intuitively implement it via (nonexistent yet) parent selector:
:focus < FORM INPUT[type="submit"] {...}
"<" here is traversal combinator that is similar to child selector ">", but selects direct parent (up through tree) instead of direct child (down through tree). So ":focus < FORM" selector selects FORM element which is direct parent of focused element.
Likewise, ascestor selector (like descendant selector, not limited to one level up) could have, for example, following look:
:focus << FORM INPUT[type="submit"] {...}
where "<<" is ascestor combinator which selects all ascestor elements (not only direct-parent ones), so ":focus << FORM" selects FORM which is ancestor of focused element.
Note that, unlike subject selector from current CSS4-selectors draft (http://dev.w3.org/csswg/selectors4/#subject ), we are not limited to apply styles to subject element itself here.
Received on Wednesday, 25 January 2012 21:35:33 UTC