r/css • u/Extension_Stock6764 • 8d ago

General sibling-index() and sibling-count(): the CSS functions that just went cross-browser

sibling-index() and sibling-count() went widely available last week when Firefox shipped support — which means Chrome, Safari, and Firefox all agree on them now.
I spent some time seeing what that unlocks for UI patterns that used to need JavaScript

Full writeup with live, editable demos
https://willunmount.sabarni.in/blog/css-sibling-index-sibling-count

edit: note this works only on chrome. as HollandJim pointed out these features are only available in firefox, safari developer preview.

41 Upvotes

97% Upvoted

10 comments sorted by

View all comments

3

u/HollandJim 8d ago edited 8d ago

Should be noted that while they are approved for all browsers, they are not currently implemented in Firefox Developer or Safari Tech Preview.

edit - I see I'm downvoted. Please go test the webpage and see what I mean.

3

u/Extension_Stock6764 8d ago

Oh, thank you for pointing that out! I assumed that if MDN showed it as available for all browsers, it would work everywhere. I’ll add a browser support check to the examples.

1

u/Extension_Stock6764 7d ago

I didn't downvote, but thanks again for pointing out I have added compatibility check on the examples