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

The CSS sibling-index() and sibling-count() functions give each element numerical information about its place inside a parent. You can use those numbers in calculations, colors, transforms, animation delays, and other numeric CSS values.

These functions remove the need to assign a custom property to every repeated item. They are useful when a list can grow or shrink because the browser recalculates the position and total from the current DOM.

What the Sibling Functions Return

sibling-index() returns the current element's one-based position among all element children of the same parent. The first child returns 1. sibling-count() returns the total number of element children in that parent.

Note: The index starts at 1, like the :nth-child() selector. It does not start at 0 like a JavaScript array index.

Create Staggered Animation Delays

Multiply the position by a time value to delay each item slightly more than the previous one. When you add another element, it receives the next delay automatically.

Example:

.notification {
  /* Delay each sibling by another 100 milliseconds. */
  animation: appear 400ms ease both;
  animation-delay: calc((sibling-index() - 1) * 100ms);
}

@keyframes appear {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

Subtracting 1 lets the first notification start immediately. The second starts after 100 milliseconds, the third after 200 milliseconds, and so on.

Calculate a Position as a Fraction

Divide the current index by the sibling count when you need a value that moves through the whole set. The result can control a hue, rotation, scale, or other calculated property.

Example:

.step {
  /* The value progresses from the first item to the last item. */
  --position: calc(sibling-index() / sibling-count());
  background: hsl(
    calc(210 + 100 * var(--position))
    75%
    55%
  );
}

The linked example creates four cards with progressively changing colors. Add or remove a card in the editor and the calculation adjusts without editing the stylesheet.

Distribute Items Around a Circle

You can combine both functions with angles. Divide one full turn by the number of children, then multiply it by the current position.

Example:

.avatar {
  --angle: calc(1turn / sibling-count() * (sibling-index() - 1));
  /* Rotate, move outward, and restore the avatar orientation. */
  transform:
    rotate(var(--angle))
    translateX(110px)
    rotate(calc(-1 * var(--angle)));
}

This approach keeps spacing even when the number of avatars changes. The parent still needs suitable positioning rules and enough room for the circle.

Difference from :nth-child()

The :nth-child() pseudo-class selects elements that match a position pattern. The sibling functions return numbers that CSS can use inside property values. Choose the feature that matches the job.

Browser Support and Fallbacks

The functions became available across current browser versions in 2026, but older browsers may ignore declarations that contain them. Put a usable default before the enhanced declaration or use @supports to apply the calculation only when supported.

Example:

.card {
  translate: 0 0; /* Stable fallback */
}

@supports (width: calc(sibling-index() * 1px)) {
  .card {
    /* Offset each card by its current position. */
    translate: 0 calc((sibling-index() - 1) * 4px);
  }
}

Important Details

• Both functions count element children in the DOM tree.
• Text nodes do not receive an index and do not increase the element count.
• All child element types count; the functions do not count only matching classes.
• The returned integer can be used wherever the target CSS value accepts the resulting calculation.
• Dynamic DOM changes cause the browser to recalculate affected values.

Conclusion

The CSS sibling functions turn an element's position and its parent's child count into reusable numbers. Use sibling-index() for per-item progression and sibling-count() for totals, then add a fallback so repeated interfaces remain clear in older browsers.