MundoKit

CSS sibling-index formula generator

Choose a child count, delay step and formula preset. Inspect the values and download CSS with a fallback for the chosen number of children.

Generate sibling-based CSS formulas locally. JavaScript is needed for the preview.

How it works

The CSS Values draft counts all element children of a parent, starting at 1. For index i, count n and step s, forward delay is (i − 1) × s; reverse delay is (n − i) × s. Our normalized progress is (i − 1) / max(1, n − 1), giving a lone child 0. Spaces around subtraction are required in calc().

Values are computed without intermediate rounding. The table shows progress to four decimals; generated CSS preserves numeric precision. The numeric nth-child fallback matches the selected count. Add an animation-name and keyframes in your own stylesheet to animate the generated delays.

Worked examples

Five children, 100 ms step

Forward delays are 0, 100, 200, 300 and 400 ms. The third child has normalized progress 0.5.

Reverse and single-child cases

Three children at 75 ms have reverse delays 150, 75 and 0 ms. One child has progress 0, without division by zero.

Frequently asked questions

Why does my calc() subtraction fail?
Write spaces on both sides of the minus: sibling-index() - 1. The generator inserts these spaces.
Do hidden elements count?
Yes. Counting follows element siblings in the DOM, not visual order or visibility. Text and comments do not count.
Can I put the formula on the parent?
Declare the formula on each child where you need its index. A value computed on the parent describes the parent’s own siblings.
Does the preview prove browser support?
The preview uses numeric values. A separate CSS.supports check reports whether this browser accepts the selected expression; test your actual stylesheet too.
Why is the first progress item invisible?
The progress preset assigns opacity directly: the first item is 0 and the last is 1 when there is more than one child. A lone child is 0 by this tool’s convention.
What limits does this generator impose?
The preview accepts 1–50 children and a 0–10,000 ms delay step. These are tool limits, not limits of CSS.

Sources

Last reviewed 2026-11-14; next review due by 2027-02-12. The method is written out above so you can check our math.