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

Re: Selecting an element combining nth-of-type() and a class/ID

From: Giovanni Campagna <scampa.giovanni@gmail.com>
Date: Tue, 31 Mar 2009 13:45:36 +0200
Message-ID: <65307430903310445j115b6cabxbd4d9f017016d525@mail.gmail.com>
To: Charles <landemaine@gmail.com>
Cc: "www-style@w3.org list" <www-style@w3.org>
2009/3/30 Charles <landemaine@gmail.com>:
> On Mon, Mar 30, 2009 at 5:22 PM, Giovanni Campagna
> <scampa.giovanni@gmail.com> wrote:
>> 2009/3/30 Tab Atkins Jr. <jackalmage@gmail.com>:
>>> On Mon, Mar 30, 2009 at 8:07 AM, Charles <landemaine@gmail.com> wrote:
>>>> What if you want it to match another pseudo class with also an ID?
>>>> For instance: li:nth-match(2, :nth-last-of-type#today.new)
>>>> We need a similar flexibility...
>>>
>>> I'm not sure what that would match, even if you had the hypothetical
>>> ability to do that.  Can you give an example?
>>>
>>> ~TJ
>>>
>>>
>>
>> Theoretically, the :nth-match works as follows, in the following (invalid) tree.
>> <ul>
>> <p class="new">a</p>
>> <li class="new">b</li>
>> <li id="today">c</li>
>> <q>d</q>
>> <li class="new" id="today">e</li>
>> <p class="new" id="today">f</li>
>> <li class="new" id="today">g</li>
>> </ul>
>> 1) First take all direct childs that matches the second part of the
>> nth-match(), that is "#today.new:nth-last-of-type" (rewritten in
>> common order). This means:
>> 1.1) Take the elements with ID #today: "c", "e", "f" and "g".
>> 1.2) Take the subsets of those which have class .new: "e", "f" and "g".
>> 1.3) Take their element types: "li" and "p"
>> 1.4) Find which of them is the last in the set of elements with the
>> same type: we have "f" and "g". "e" is not, because it is followed by
>> another <li> (it doesn't matter if the latter <li> matches #today.new)
>> 1.5) The resulting list is then "f" and "g"
>> 2) Among the results of the first match, find which is number two: in
>> our case it is "g".
>> 3) Among the results of the step 2 (just one node), find those which
>> match "li": only "g"
>>
>> It is a li element that is the second element being the last of its
>> type and having class "new" and id "today".
>> If <q> (element "c") had class "new" and id "today", we would have had
>> no match from the selector.
>>
>> Anyway, I'm not sure what advantage you can get from such a complex selector.
>>
>> Giovanni
>>
>>
>
>
> There are a few advantages to such a complex selector. One obvious
> example comes to mind: applying a user style sheet to hide the Flash
> square banner ad in the right column of the New York Times' web site.
> It is included in a <div> with a class named "columnGroup". There are
> other <div> sibling elements before, and the number of divs before
> vary, depending on the page on which you are. And in CSS you can't
> select an element based on its children like you can do easily in JS.
> So I can't select a div with a class columnGroup which has an <object>
> element as a child, and which <object> child has a "Flash" ID. That
> would be perfect to be able to do it too...But in the meantime, gotta
> be creative to work with what we have (and if possible)
> :/
>
>
>
> Charles.
>

But you don't have a :nth-match (or :nth-child-match) now. So, if you
need to wait for Level 4, just wait for :matches() (the ability to
select an element considering its children).

Giovanni
Received on Tuesday, 31 March 2009 11:46:16 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:17 GMT