Re: [csswg-drafts] [css-values]: Expose `n` as a `<calc-constant>` (#8981)

Left my thoughts on the related ticket @rthrejheytjyrtj545 mentioned. Granted that this `n` idea seems to be a sizable departure from the original heart of that issue.

Would it be better to leave this issue here open, dedicated to this idea, or close this in favor of that one?

Below are the thoughts I shared on that ticket. Only sharing them here as well in response to the other comments left here:

---

Hey all, as the scope of this issue has changed quite a bit from its original concept/spec, it may be worth considering changing the name on the ticket, so it can be found more easily.

I essentially duplicated the more recent evolution of this issue in #8981.

---

That's a good point, that using `n` to reference the `n` from an `nth-child` statement wouldn't work well since multiple `nth-child` statements can be used on a single selector.

One possibility would be to introduce a second optional argument to `nth-child` for a CSS custom property to assign the iterator value to, like this:

```css
element:nth-child(n + 1, --n) {
  transition: /* ... */;
  --delay: calc(var(--n) * 200ms);
  transition-delay: var(--delay);
}
```

In either case, we should still discuss all the pros/cons/implications of allowing selectors to also be property-declarative in this way, as this would set a very new precedent not before used in CSS afaik.

Another consideration of using a second argument in those pseudo-selector expressions for this is that it would also beg the question, "Would each `:nth-child()` second arg value yield a unique value per its expression, or would this iterator value match the `nth` **matched** element?"

```css
element:nth-child(n, --m):nth-child(n + 1, --n) {
  /* are `m` and `n` equal?
     it's a bit unclear. */
}
```

Alternatively, should an iterator require a completely different syntax altogether, such as the following example, where the custom property name is used completely outside the expression itself, after the selector and before the style block?

```css
element:nth-child(n):nth-child(n + 1) --n {
  transition: /* ... */;
  --delay: calc(var(--n) * 200ms);
  transition-delay: var(--delay);
}
```

-- 
GitHub Notification of comment by brandonmcconnell
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8981#issuecomment-1595972412 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Sunday, 18 June 2023 05:53:04 UTC