Web platform features explorer

sibling-count() and sibling-index()

The sibling-count() and sibling-index() CSS functions return integers that are useful to style elements based on their positions among siblings or on the number of siblings, for example as part of a calc() expression.

Status

Limited availability

MDN documentation

Specifications

Browser support

  • Chrome 138 Released on 2025-06-24
  • Chrome Android 138 Released on 2025-06-24
  • Edge 138 Released on 2025-06-26
  • Firefox ❌ See bugzil.la/1953973 Vendor position : positive
  • Firefox for Android ❌ See bugzil.la/1953973 Vendor position : positive
  • Safari 26.2 Released on 2025-12-12
  • Safari on iOS 26.2 Released on 2025-12-12

Baseline availability blocked since December 2025 by Firefox (6 months)

Surveys

Web Platform Tests (WPT)

View the latest WPT test results for this feature

Developer votes

👍
73

Do you need this feature?
Let us know by leaving a 👍 reaction on the feedback issue. Don't forget to also leave a comment explaining your specific use case.

Developer use cases

  • Animate in a row of cards with increasing `transition-delay`, so they appear one after another. Animate in a row of cards with increasing `transition-delay`, so they appear one after another. [see original comment]
  • Reduce the size of all cards within a container, dynamically, as the number of cards within a container grows (indefinitely) - ensuring all cards fit within the container, with little-to-no overlaps. Whilst positioning each card "randomly" within the container using CSS alone. Here's what I came up with: https://codepen.io/TigerYT/pen/myVVWZP. https://github.com/user-attachments/assets/af142375-73d0-449f-ac5a-6eb07c855d5c The issue? The only CSS-only solution to my problem (that I could come up with) used both `sibling-count()` and `sibling-index()`. Both of which, of course, are currently Chromium-only. Reduce the size of all cards within a container, dynamically, as the number of cards within a container grows (indefinitely) - ensuring all cards fit within the container, with little-to-no overlaps. Whilst positioning each card "randomly" within the container using CSS alone. Here's what I came up with: https://codepen.io/TigerYT/pen/myVVWZP. https://github.com/user-attachments/assets/af142375-73d0-449f-ac5a-6eb07c855d5c The issue? The only CSS-only solution to my problem (that I could come up with) used both `sibling-count()` and `sibling-index()`. Both of which, of course, are currently Chromium-only. [see original comment]

View as JSON | Edit this feature | Report an issue | Web-features entry: source, dist