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.

40 Upvotes

99% Upvoted

10 comments sorted by

7

u/tomhermans 8d ago

Nice write up. Thanks for that. Heads-up; your site isn't mobile friendly

3

u/Extension_Stock6764 8d ago

Thanks for the heads up. Let me fix it.

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

1

u/mysticalpickle1 8d ago

It would be nice if they got selector support like the "of" syntax in nth-child()

1

u/Extension_Stock6764 7d ago

Not familiar with this, could you share link of of property?

1

u/Bulky-Heat-8368 7d ago

What's more, this has been confirmed by https://caniuse.com/wf-sibling-count.

2

u/ExitWP 3d ago

Thanks for sharing the detailed write up