Repository navigation
sibling-count() and sibling-index() #361
Description
This GitHub issue is for collecting web developer signals for 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.
Browser support
- Chrome 138 (Jun 24, 2025)
- Chrome Android 138 (Jun 24, 2025)
- Edge 138 (Jun 26, 2025)
- Firefox 154 (Aug 18, 2026)
- Firefox for Android 154 (Aug 18, 2026)
- Safari 26.2 (Dec 12, 2025)
- Safari on iOS 26.2 (Dec 12, 2025)
Give us feedback
If you're pressed for time, but you want this feature to be available in all browsers, please give this issue a thumbs up 👍 reaction.
However, a much better guide for us is to know how you'd use this feature, and what you're having to do in the meantime. This helps us judge the priority versus other features.
Copy the template below in a comment, and add the details that matter to you.
## What I want to do with this feature
<!-- Add your specific use-cases, even if they seem obvious to you. -->
## What I'm having to do in the meantime
<!--
Are you having to use another feature instead, a polyfill, or is it blocking you completely?
Why are the alternatives worse than using this feature?
-->All comments are expected to adhere to the Code of Conduct.
Learn more
You can learn more about this feature here:
Activity
ryantownsend commentedon Nov 25, 2025
What I want to do with this feature
Animate in a row of cards with increasing
transition-delay, so they appear one after another.What I'm having to do in the meantime
Specify multiple CSS selectors using
nth-childto set specifictransition-delayvalues for each card.TimChinye commentedon Dec 21, 2025
There's been an absolute ton of times where I've need this feature, the most recent example is below:
What I want to do with this feature
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.
CSSOnlyRandomContainedGridLayout.mp4
The issue? The only CSS-only solution to my problem (that I could come up with) used both
sibling-count()andsibling-index(). Both of which, of course, are currently Chromium-only.What I'm having to do in the meantime
JavaScript. Which ruined the whole "Randomness in CSS" thing (even though it's not true randomness), and additionally, the prod version of the component included some mouse-movement-based animation and unique hover effects, nnd rest of the website was designed to be quite animation-heavy too, so the CSS > JS performance benefits would've been great.
kizu commentedon Jun 29, 2026
What I want to do with this feature
Many many things: staggering, visual adjustments, custom layouts, etc.
What I'm having to do in the meantime
https://kizu.dev/tree-counting-and-random/ — also the answer for the ”what I want”, but basically right now the only options are complex quantity queries. Especially for the count you'd have to use
:has()which can be very bad for performance on pages with many elements.This my article, for example, crashed Safari when I published it, and even now the performance can be not ideal.
github-actions commentedon Aug 25, 2026
This feature reached Baseline status on Aug 18, 2026, which means it's now fully supported across browsers. Developer signals are no longer needed for this feature, so this issue can be closed.
Thank you to everyone who provided feedback! 🎉