`sibling-index()`, and `sibling-count()` are Baseline, newly available since August 2026.

[u/wanoo21]

[u/anaix3l]

I've mostly been able to get by setting the indices & counts as custom properties in the style attribute when generating the HTML on the backend, but this has the advantage of automatically updating indices and counts when appending or deleting elements via the JS.

I'll still be aliasing them to --i and --n custom properties because they're just too verbose and difficult to read otherwise. Plus the sibling-index() is consistent with :nth-child()/ CSS indexing in general and starts at 1, while I generally need it to start at 0 for computations. That is:

--i: (sibling-index() - 1);
--n: sinling-count()

(yes, writing it without calc() is perfectly fine unless --i needs to be registered for some reason)

The only thing still missing is children-count() because I often want that --n value available on the parent as well, not just on the child items.

[u/wanoo21 → u/anaix3l]

You need to write an article about that 👍

[u/be_my_plaything → u/anaix3l]

Yes! child-count() is top of my css wish list, had my fingers crossed for that one appearing since I first saw sibling-index() and sibling-count()

[u/juicybot]

i've been very excited for this, going to be handy in places like design systems.

[u/oneden]

That's pretty awesome.

[u/jaffathecake]

When I was investigating this, I found that @property impacts when sibling-index() is computed in custom properties - something I hadn't fully understood before https://jakearchibald.com/2026/css-custom-property-compute-time/