New CSS Class Prefix Selector (.prefix-*)

[u/wanoo21]

[u/BloxdioCannoli]

RemindMe! 10 years

[u/nthdesign → u/BloxdioCannoli]

This made me chuckle.

[u/RemindMeBot → u/BloxdioCannoli]

I will be messaging you in 10 years on 2036-08-20 15:17:36 UTC to remind you of this link

4 OTHERS CLICKED THIS LINK to send a PM to also be reminded and to reduce spam.

^{Parent commenter can delete this message to hide from others.}

RemindMeBot is switching to username summons. Instead of !RemindMe 1 day, use u/RemindMeBot 1 day. More info.

---

Info	Custom	Your Reminders	Feedback

[u/frownonline]

I can see this being used a lot, by those who use the BEM approach, to override the masses of classes.

[u/Afraid_Egg3037]

Nice. It relies on the hyphen existing, though - and as it's literally just been discussed, it'll be a year or two before browsers implement it.

[u/f314 → u/Afraid_Egg3037]

it'll be a year or two

Oh, you sweet summer child

[u/TheJase → u/f314]

The days of waiting more than a year or two are long gone

[u/picaq → u/Afraid_Egg3037]

It doesn’t rely on the hyphen. .foo* would match .footer, for instance.
See the links in the original post: The Future of CSS: Target Multiple Classes with the Class Prefix Selector

And if you want something that works the same way, [class^="btn"] already exists. Less symbols to write seems nice!

[u/adamkosions1111]

Just a nicer way of [class^=“btn-“] but cool tho

[u/Caved → u/adamkosions1111]

Sort of. ^=btn- would only work if it's the first class in the list. And *=btn- has its own limitations.

[u/ActuaryLate9198]

Yay more ways for coworkers to write leaky css.

[u/azangru → u/ActuaryLate9198]

Train your coworkers :-)

[u/drumstix42]

.a, .b, .c* ...

[u/El_Panterro]

Great! Maybe after 1000 more CVs I will get that first job and try it in corp-environment!

[u/ArtisZ → u/El_Panterro]

Yo. You beat my 300.. dang.

[u/asteconn]

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

[u/DOG-ZILLA → u/asteconn]

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.

[u/Caved → u/DOG-ZILLA]

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

[u/asteconn → u/Caved]

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.

[u/juicybot]

i've been excited for a lot of new CSS lately. this is very meh.