Re: [csswg-drafts] [css-values] Proposal: `children-count()` function (#11068)

I upvoted this when I first saw it and just came back to say that in starting to use `sibling-index()`, I'm finding it a real pain not to have this too.

Up until now, I've always used Pug to do something like this:

```
- const DATA = [/* an array of objects */];
- const N = DATA.length;

.parent(style=`--n: ${n}`)
  - DATA.forEeach((c, i) => {
    .child(style=`--i: ${i}`)
  - })
```

This is the pattern I always use. Every single thing I've ever done has needed `--n` on the parent too. So now I still need to set `--n` it this way, even if I'm using `sibling-index()`.

> Yes. While we could assign the `children-count()` to a registered custom property and inherit it on the children, this is rather cumbersome, and a native `sibling-count()` could be more performant.

This is yet another sore point with `sibling-index()`. It starts at `1` and I find I always need it to start at `0`, so I still need to use a custom property anyway.

```
--i: calc(sibling-index() - 1)
```

I suppose it starts at `1` to be consistent with `:nth-child()`. Unfortunately, that's not what I need in computations. Plus, `sibling-index()` is a lot more verbose than `--i` and that verbosity is a huge readability problem for me.

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


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

Received on Friday, 23 May 2025 07:33:10 UTC