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

Re: CSS pseudo-selector :closest and :further

From: Marat Tanalin <mtanalin@yandex.ru>
Date: Wed, 18 Mar 2015 21:10:05 +0300
To: David Rodrigues <david.proweb@gmail.com>, "www-style@w3.org" <www-style@w3.org>
Message-Id: <794881426702205@web23g.yandex.ru>
18.03.2015, 20:23, "David Rodrigues" <david.proweb@gmail.com>:
> will be great if create a new pseudo-selector definition that allow 
> select closest or further element from a base element.

I like the idea in general. It would also make sense to have a complementary selector to select elements at a specific tree-level between the closest descendant and the distant (further) descendant elements, e.g.:

    .example:nested(2)

would match elements that have the `example` class and are 2 levels deep from the base element:

    <div class="example"><!-- This does not match. -->
        <div class="example"><!-- This does match. -->
            ...
        </div>
    </div>

As for naming, `closest` idiom is indeed already used for selecting parent/ancestor element in JavaScript. We could use the same function for all three cases:

    .example:nested(first) -- selects first (closest in your originally proposed terms) descendant having the class.

    .example:nested(last) -- selects last (further in your originally proposed terms) descendant having the class.

    .example:nested(2) -- selects second-level descendant having the class.

It may also be more flexible to use entirely another approach: a functional notation that could allow to use more complex selectors to match desired elements, e.g.:

    ::nested(first, UL > LI.example.foo#bar)

would match `LI` elements which are children of an `UL` element and have `example` and `foo` classes and the `bar` id.
Received on Wednesday, 18 March 2015 18:10:45 UTC

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