CSS sibling-index() and sibling-count()

Category: CSS
Type: New or changed feature
Status: In development (Chrome In development)
Intent stage: None

Summary

sibling-index() and sibling-count() can be used as integers in CSS property values to style elements based on their position among its siblings, or the total number of siblings respectively. These functions can be used directly as integer values, but more interestingly inside calc() expressions. Example: li { margin-left: calc(10px * sibling-index()); }

Motivation

From the explainer: "Authors have been asking for a convenient way of styling elements based on their DOM position among their siblings as well as the total number of siblings. Example use cases for this are staggered animations setting the animation- or transition-delay based on the sibling position, and building a radial menu."

Standards & signals

Specification: https://drafts.csswg.org/css-values-5/#tree-counting
Firefox: Positive
Safari: No signal
Web developers: Positive — https://css-tricks.com/how-to-wait-for-the-sibling-count-and-sibling-index-functions/ https://chriscoyier.net/2023/11/29/element-indexes/ https://kizu.dev/tree-counting-and-random/
Tracking bug: https://crbug.com/40282719

Docs: https://github.com/w3c/csswg-drafts/blob/main/css-values-5/tree-counting-explainer.md

Samples: https://codepen.io/argyleink/pen/KwKXPYW

Explainers: https://github.com/w3c/csswg-drafts/blob/main/css-values-5/tree-counting-explainer.md

View on chromestatus.com