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

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

From: Charles <landemaine@gmail.com>
Date: Mon, 30 Mar 2009 15:07:50 +0200
Message-ID: <e6575a30903300607v627a72acmfd3344d8f11a3136@mail.gmail.com>
To: "Tab Atkins Jr." <jackalmage@gmail.com>
Cc: www-style@w3.org
On Mon, Mar 30, 2009 at 1:51 PM, Tab Atkins Jr. <jackalmage@gmail.com> wrote:
> On Mon, Mar 30, 2009 at 3:18 AM, Charles <landemaine@gmail.com> wrote:
>> Hello,
>> We should be able to select an element combining nth-of-type() and a class/ID.
>> See: http://www.adsweep.org/nth-of-type-class-id.html
>> If I try for instance li.new:nth-of-type(2), it doesn't select the
>> second list item *among* those that have a "new" class. You can only
>> select the second list of the <ul> item *if* at the same time it has a
>> "new" class.
>> The only way that I know, to first select list items with a "new"
>> class, and then, among them, select the second item, is this:
>> li:not([class="new"])+li.new+li.new
>> It is too cumbersome. We need an easier solution. Imagine if we had
>> several classes in this unordered list, and also if we had to select
>> the 5th list item...The code would be huge. We need a solution.
>> (I need this code in an ad-removal tool that injects CSS into pages to
>> hide specific elements of the pages)
> This was actually discussed on this list only two weeks ago, funnily enough.
> The solution that seemed satisfying was an :nth-match(num, selector)
> pseudoclass, which would work exactly like :nth-child except it would
> only 'count' elements that also matched the selector.
> Your example would be handled as "li:nth-match(2, .new)".
> ~TJ

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...

Charles-André Landemaine.
Received on Monday, 30 March 2009 13:08:47 UTC

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