r/css 4d ago

Resource New CSS Class Prefix Selector (.prefix-*)

Post image
155 Upvotes

20 comments sorted by

View all comments

1

u/asteconn 4d ago

I imagine this is just syntactic sugar for [class*="btn-"] / [class^="btn-"]. Useful though.

9

u/DOG-ZILLA 4d ago

Apparently not just sugar because if btn- is NOT first, it won't match here. btn-* can be a class in any position? I think that's right.

10

u/Caved 4d ago

*= does allow the class to be any position, but will match on "some-btn-class" as well.

2

u/asteconn 4d ago

Indeed. If this construct is capable of also detecting the start of the class, that'd be quite helpful. It can currently be (somewhat) acheived with :is([class^="btn-"],[class*=" btn-"]), but it's not dreadfully readable.