W3C home > Mailing lists > Public > www-style@w3.org > March 2015

CSS pseudo-selector :closest and :further

From: David Rodrigues <david.proweb@gmail.com>
Date: Tue, 17 Mar 2015 16:08:15 +0000
Message-ID: <CAEsg9X0XU-8Og-bi-rUpHqPJB3macdDyXi6pV1irD06KMSG8oQ@mail.gmail.com> (sfid-20150317_160823_265916_C8DE0138)
To: www-style@w3.org
I don't know if here is the right place, but will be great if create a new
pseudo-selector definition that allow select closest or further element
from a base element. For instance:

..button-group > .wrapper > .text > .button > .text


​Now I want select only the first .text, but not the last one, so I can do:

..button-group > .wrapper > .text { color: blue }


But suppose that .wrapper can be another element, or even, it can be more
complex, like:

..button-group > .a > .b > .c > .d > .text > .e > .button > .text


​So if we have a pseudo-selector that can select only the closest element,
we can do that:

..button-group .text:closest​


​It'll match all elements .text closest to .button-group:
​

​.button-group > .wrapper > .text         << match
​.button-group > .wrapper > .text > .text << not match
​.button-group > .label > .text           << match
​.button-group > .a > .b > .text          << match
​.button-group > .a > .b > .text > .text  << not match
​.button-group > .text                    << match


The :further do the inverse:

​.button-group > .wrapper > .text         << not match
​.button-group > .wrapper > .text > .text << match
​.button-group > .label > .text           << not match
​.button-group > .a > .b > .text          << not match
​.button-group > .a > .b > .text > .text  << match
​.button-group > .text                    << not match



-- 
David S. Rodrigues
Received on Wednesday, 18 March 2015 17:21:34 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:39:30 UTC