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

CSS sibling-index() and sibling-count() are new Baseline 2026 functions that expose an element's position among its siblings and the total number of sibling elements. They make many staggered layouts and calculated styles possible without adding extra classes or custom properties in HTML.

sibling-index() returns a 1-based integer for the current element. sibling-count() returns the total number of element children in the same parent, including the current element.

sibling-index() Syntax

.item {
  --position: sibling-index();
}

The first child returns 1, the second returns 2, and so on.

sibling-count() Syntax

.item {
  --total: sibling-count();
}

Every element under the same parent receives the same sibling count.

Both functions return numeric values, so they are useful inside calc(), animation delays, transforms, spacing, and other computed styles.

Create Progressive Indentation

Example:

<div class="list">
  <div class="item">First</div>
  <div class="item">Second</div>
  <div class="item">Third</div>
  <div class="item">Fourth</div>
</div>

<style>
.item {
  margin-left: calc((sibling-index() - 1) * 20px);
}
</style>

The first item receives no extra margin. Each following item moves 20 pixels farther to the right.

Stagger Animation Delays

One of the most useful applications is staggering repeated elements without adding inline style values.

.card {
  animation: appear 400ms ease both;
  animation-delay: calc((sibling-index() - 1) * 100ms);
}

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

Each card starts slightly later based on its sibling position.

Use sibling-count() in Calculations

You can combine both functions when a style depends on the position and total number of elements.

.step {
  --index: sibling-index();
  --total: sibling-count();

  opacity: calc(0.4 + (var(--index) / var(--total)) * 0.6);
}

This pattern can create progress effects, proportional widths, or different transforms across a group.

Difference from :nth-child()

:nth-child() is ideal when you want to target specific positions. The sibling functions are better when you need the position as a number inside a calculation.

1-Based Indexing

sibling-index() starts at 1 rather than 0. This matches :nth-child() and makes the first element easy to use directly in human-readable ordering.

.row {
  transform: translateX(
    calc((sibling-index() - 1) * 12px)
  );
}

Subtract 1 when a calculation should start from zero.

Progressive Enhancement

These functions are new in Baseline 2026, so older browsers may ignore declarations that use them. Keep the base layout usable without the calculated enhancement.

.item {
  margin-left: 0;
}

@supports (margin-left: calc(sibling-index() * 1px)) {
  .item {
    margin-left: calc((sibling-index() - 1) * 20px);
  }
}

Common Mistakes

• Assuming zero-based indexing: the first sibling returns 1.
• Counting text nodes: sibling-count() is based on element siblings, not arbitrary DOM text nodes.
• Using the function only for generated content: it returns an integer and is especially useful for calculations.
• Ignoring older browsers: provide a reasonable fallback layout.

Use the Functions with Custom Properties

Storing the returned values in custom properties can make complex rules easier to read. A component can calculate its index once and reuse that value in transforms, delays, opacity, or spacing.

.item {\n  --index: sibling-index();\n  --count: sibling-count();\n  animation-delay: calc((var(--index) - 1) * 80ms);\n  translate: calc((var(--index) - 1) * 6px) 0;\n}

This pattern is useful in card lists, navigation items, timelines, charts, and decorative sequences where the same positional value drives several visual properties.

Conclusion

sibling-index() and sibling-count() make repeated-component styling more data-aware without modifying markup. They are especially useful for staggered animations, progressive spacing, proportional styling, and other calculations based on an element's position within a group.