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

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.

Received on Monday, 30 March 2009 18:28:52 UTC