W3C home > Mailing lists > Public > www-style@w3.org > January 2012

Re: [css4-selectors] Focused descendant pseudo class

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
Message-Id: <508291327527297@web140.yandex.ru>
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

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:38:54 UTC