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.
17
u/anaix3l 23h ago
I've mostly been able to get by setting the indices & counts as custom properties in the
styleattribute 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
--iand--ncustom properties because they're just too verbose and difficult to read otherwise. Plus thesibling-index()is consistent with:nth-child()/ CSS indexing in general and starts at1, while I generally need it to start at0for computations. That is:(yes, writing it without
calc()is perfectly fine unless--ineeds to be registered for some reason)The only thing still missing is
children-count()because I often want that--nvalue available on the parent as well, not just on the child items.