- From: Tab Atkins Jr. <jackalmage@gmail.com>
- Date: Wed, 17 Sep 2014 12:19:09 -0700
- 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