Sibling Index & Count

Baseline 2026 Reference ↗

Use sibling-index() and sibling-count() to calculate CSS values from an element’s position and the number of children in its parent, without manually assigning an index to each element.

<style>
  .parent {
    width: min(500px, 100%);
    border: 1px solid black;
  }

  .parent > * {
    width: calc(sibling-index() / sibling-count() * 100%);
    background-color: lightblue;
  }
</style>

<div class="parent">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

sibling-index() starts at 1. sibling-count() counts all sibling elements, including the element itself.

In this example, the three children have widths of approximately 33.3%, 66.7%, and 100%. Adding or removing children automatically updates the calculation.

The .parent > * selector applies the styles to direct children.

These functions are newly available across current browsers as of August 2026. Older browsers may ignore the calculated width.

References: sibling-index() and sibling-count().

This tip was suggested through our form. Thank you!