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

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

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Mon, 30 Mar 2009 06:51:34 -0500
Message-ID: <dd0fbad0903300451i6ca396fbu8dcbccc08be7e5c6@mail.gmail.com>
To: Charles <landemaine@gmail.com>
Cc: www-style@w3.org
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
Received on Monday, 30 March 2009 11:52:13 GMT

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