W3C home > Mailing lists > Public > www-style@w3.org > September 2014

Re: limitation proposal of :nth-child

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Wed, 17 Sep 2014 12:19:09 -0700
Message-ID: <CAAWBYDBHX1Rc1v2iy=ziV-iqWdki-YV1hvVT2mtR_LMVE+m26g@mail.gmail.com>
To: Zéfling <zefling@ikilote.net>
Cc: www-style list <www-style@w3.org>
On Wed, Sep 3, 2014 at 4:41 AM, Zéfling <zefling@ikilote.net> wrote:
> Hi,
>
> Currently it is not possible to make all elements 1 to 10 on list with a
> selector. I think it could be interesting if one element of a series that
> have the same property without having to :nth-child (1), :nth-child (2),
> :nth-child (3), ... but something like this :
> - :nth-child(n in (1 to 10))
> - :nth-child(n in (1 to 10, 12 to 15))

It certainly is possible!  Your two examples can be done as:

:nth-child(-n + 10)
:nth-child(-n + 10), :nth-child(n + 12):nth-child(-n + 15)

The syntax isn't *ideal*, but the examples in the spec should
hopefully make it fairly clear.

> Another thing, it would be nice to retrieve the index of an element
> (nth-child-index) to “modular” CSS, like this:
>
> :root {
>   --loadingAnimTime : 1.12s;
>   --loadingAnimCount: 12;
> }
> .loading > span:nth-child(n in (1 to var(--loadingAnimCount))) {
>   transform: rotate(calc( ( 360deg / var(--loadingAnimCount) ) * (
> nth-child-index - 1 ) ));
>   animation-delay: calc( ( var(--loadingAnimTime) / var(--loadingAnimCount)
> ) * ( nth-child-index - 1) );
> }
>
> Example :
> http://ikilote.net/fr/Blog/Techno-magis/112.html (sorry, my article is in
> French)
> Well, I'm sure this is too ambitious. ^_^;

It's been suggested before, but nobody's been able to come up with
use-cases beyond the occasional toy like your example.  Note that
preprocessors can make this kind of thing easier - a @for loop in Sass
can do this kind of thing pretty trivially.

~TJ
Received on Wednesday, 17 September 2014 19:19:56 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:46 UTC