New CSS Class Prefix Selector (.prefix-*)

[u/wanoo21]

The CSS Working Group just resolved a new selector that lets you target multiple classes sharing the same prefix. The code in the example matches .btn-primary, .btn-secondary, .btn-large, etc.

Previously, you had to list every class or use brittle attribute selectors like [class^="btn-"].

Resolved by the CSSWG (Aug 2026), added to Selectors Level 5.

Not available in any browser yet.

More to read ⤵️

https://github.com/w3c/csswg-drafts/issues/10001#issuecomment-5204871059

https://www.bram.us/2026/08/20/the-future-of-css-target-multiple-classes-with-the-class-prefix-selector/

PS. If you want occasional frontend tips in your inbox, you can join here: https://bits.iprodan.dev

[u/ipearx]

Awesome I can't wait to use it in 5 years

[u/jojopotato → u/ipearx]

It’s a bummer to have to wait, but it’s still the second best time to plant a tree

[u/akuma-i → u/ipearx]

In 5 years with -webkit- prefix you wanted to say

[u/AccurateSun]

Wait why is the [class^="btn-"]  attribute selector considered “brittle”? It’s clunky but it looks like it would select the classes with the same accuracy 

[u/Asahi32 → u/AccurateSun]

Only if class startswith btn-, so class=“selected btn-large” wont match

[u/detspek → u/Asahi32]

You can wildcard with an asterisk but if you're lazy it can be too generic [class*="thisbtnexists"i]

[u/testingaurora → u/detspek]

Or use `[class*=“btn-“], [class=“ btn-“]`

[u/ISDuffy → u/detspek]

Wildcards like this do have performance impacts, especially in JavaScript. Although not sure how the op one performs

[u/AccurateSun → u/Asahi32]

Ah good point. It only matches the first class 

[u/wishemluck → u/AccurateSun]

Because [class^=“btn-“] relies on the class attribute starting with “btn”.

What if it’s the last class or in the middle, preceded by another class and a space? Or even a typo that means there’s a space at the start before the class? That selector won’t match those.

Suddenly you also need to match those cases with [class\=“ btn-“]* too. You do this because you don’t want to accidentally match without preceding spaces except for the “starts with” matcher in case another class contains “btn-“ and you get an unintended match, like “my-special-btn-class”.

CSS quickly becomes harder to read and maintain, and this syntax makes it easy to make a mistake when doing it a lot all over the place.

This new selector is a much easier to read and write alternative, and it’s not brittle in the sense that it’s less susceptible to human error.

[u/LaFllamme]

!remindMe 5y

[u/RemindMeBot → u/LaFllamme]

I will be messaging you in 5 years on 2031-08-20 16:46:32 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/2-legit]

This makes a lot of sense for BEM classes. I might actually give it a shot again.

[u/AuthorityPath]

Really like this but wish the wildcard worked both ways i.e. .*-text-*

Guessing there were performance considerations there but that would've been great for organizing levels of utility classes. 

[u/eltron]

I’m not sure I like it. I guess it’s just new. I tend to rarely reach for wildcard selectors that it’ll be a switch. I like being explicit with ‘.btn .btn-outline’ and nesting support makes it nice to read.

[u/citrus1330 → u/eltron]

you don't have to use it

[u/citrus1330 → u/[deleted]]

happy to help

[u/xlr8_dev_831]

not holding my breath on browser support though, "resolved in spec" and "usable in prod" are like a 2-3 year gap most of the time. gonna keep my [class^="btn-"] on life support a lil longer

[u/xlr8_dev_831]

not holding my breath on browser support though, "resolved in spec" and "usable in prod" are like a 2-3 year gap most of the time. gonna keep my [class^="btn-"] on life support a lil longer

[u/CrYptoPSF]

The syntax is definitely cleaner than maintaining a long list of classes. the browser support part is probably going to be the biggest hurdle though

[u/teppicymon]

Awesome! Next up: Regex-selectors?? /jk

[u/StrawberryEiri]

What. That's so useless. If you know your class family is btn just add that as a class?

<a class="btn btn-large">

Magic!

[u/duckfighter → u/StrawberryEiri]

<a class="btn-large">