Transferring sibling-count() to a parent element

Title “Transferring sibling-count() to a Parent Element”, a “Show All The Replies (6)” list of comments with avatars, a red M logo, and a cartoon avatar of the author in a cap.

Temani Afif shows how a parent can know how many children it has. The sibling-count() function counts siblings, not children, so he adds an extra element sized with sibling-count() and uses scroll-driven animations with view-timeline and timeline-scope to turn its width into a --n variable on the parent. Use it for item counts, square-ish grids with sqrt(), or circular layouts. Works in Chrome and Edge for now.

blog.master.dev/transferring-sibling-count-to-a-parent-element