Re: [csswg-drafts] [css-values] enable the use of counter() inside calc() (#1026)

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.

---

@tabatkins made a good point in my related ticket 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, introducing a new convention, for this purpose would be to add 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/1026#issuecomment-1595970983 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:47:17 UTC