Re: [csswg-drafts] [css-values-5] Introduce nth-item() (#11103)

After thinking about it some more, I agree with @tabatkins that we don't need a `<list>` type, passing variables around of comma-separated values would work fine.

I wonder if we could feed two birds with one scone by giving it a more general name (e.g. `get()` or `item()`) and allowing an optional `<ident>` label for each item. If a label is provided, the item can be accessed via either its label, or its index.

Percentages would also be incredibly useful, to use scales of values without needing to know the number of items.

Examples:

```css
--color-accent: #edf2ff, #dbe4ff, #bac8ff, #91a7ff, #748ffc, #5c7cfa, #4c6ef5, #4263eb, #3b5bdb, #364fc7;

background: item(var(--color-accent), 1); /* #edf2ff */
background: item(var(--color-accent), 50%); /* #748ffc */
background: item(var(--color-accent), 100%); /* #364fc7 */
```

```css
--color-accent: {lightest: #edf2ff, light: #dbe4ff, #bac8ff, #91a7ff, medium: #748ffc, 60: #5c7cfa, 70: #4c6ef5, #4263eb, dark: #3b5bdb, darkest: #364fc7};
/* All of the above still work, plus: */
background: item(var(--color-accent), lightest); /* #edf2ff */
background: item(var(--color-accent), medium); /* #748ffc */
background: item(var(--color-accent), darkest); /* #364fc7 */
```

Essentially an alternative way of doing #9992 that seems _much_ easier to implement.

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


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

Received on Sunday, 20 July 2025 23:38:23 UTC