Web features explorer

sibling-count() and sibling-index()

Limited availability

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.

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 Not supported Position: positive Bugs: 1953973
  • Firefox for Android Not supported 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 (7 months)

👍
82

Need this feature?
Leave a 👍 on the feedback issue
Don't forget to also leave a comment explaining your specific use case.

MDN documentation

Specifications

Web Platform Tests (WPT)

View the latest WPT test results for this feature

Surveys

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]
  • Many many things: staggering, visual adjustments, custom layouts, etc. Many many things: staggering, visual adjustments, custom layouts, etc. [see original comment]

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