Post

To target multiple classes with the same prefix, you'd typically have to resort to brittle attribute selectors. To make things easier, CSS is getting a new selector: the “Class Prefix Selector” (`.foo-*`). Check brm.us/class-prefix... to get the details. (Browser Support: None 😛 — just resolved!)

brm.usThe Future of CSS: Target Multiple Classes with the Class Prefix SelectorTo target multiple classes that share the same prefix, you'd typically have to resort to brittle attribute selectors or add extra base classes to your markup. To make things easier, CSS is getting a n...

19/8/26, 10:40 pm27 reposts159 likes

@kilianvalkhof.com

This is very cool! In the current spec it has the same specificity as a regular class, has that been discussed/consciously designed? .foo-* is more 'generic' than .foo-bar, so there's an argument to be made it should have a lower specificity.

@romainmenke.bsky.social

I think it should to have the same specificity. It is equivalent to :is(.foo-a, .foo-b, .foo-c, ...) It also selects elements by classname.

@kilianvalkhof.com

Yeah, also fair! But it'd be good for it to be an explicit decision right?

@kilianvalkhof.com

more specifically it's equivalent to [class^="foo-"], but that also has the same specificity

@romainmenke.bsky.social

yup, never hurts to have resolutions and to make the specs unambiguous :)

Seems like a good thing to bring up at the WG for further discussion. Shall I file an issue, or will you file one?

Tab Atkins-Bittner

I thought about this but made þͤ editor decision that it wasn't worth trying to slice specificity more finely for it. Just put your wildcard rule first, that's þͤ normal behavior anyway!

One thing I haven't seen yet is that attribute selectors allow you to specify case sensitivity. But I guess `.foo-*` and `.Foo-*` just follow 'regular' class case sensitivity?

Yes, they follow the same rules when it comes to casing.

Christoph Päper

Case-insensitive in quirks mode, that is.

@davatron5000.bsky.social

Do custom-elements next!

@stupidcomputer.bsky.social

This one is gonna upset and confuse people used to regular languages and the kleene hull/star.

Tab Atkins-Bittner

* is used in this exact fashion (standing in for something, rather than being a repetition operator) in many contexts: * þͤ existing universal selector * Posix file globs * normal English

@cjaythecreator.bsky.social

CSS has invented regex for people who just wanted slightly less suffering

Danny Engelman 🌷🏍️🛥️

Cool, So we can do what we already could, with fewer keystrokes Meanwhile, we still can't select HTMLUnknownElements with CSS We need some ugly JavaScript code to make the distiction between <tagname> I can't become anything else and <tag-name> I can be a defined Custom Element one day!

god i hope this makes tailwind code readable

WILD! get it, wild… like wild card… love it tho, very handy.

This could probably be more explicit about why the attribute version is brittle

Christoph Päper

Indeed, it could mention why `[class|="foo"]` (even if relaxed as suggested) is also not quite the same as `[class^="foo-"], [class*=" foo-"]` or `.foo-*`.

I updated the post to include selector benchmark results: gist.github.com/bramus/1de3b...

gist.github.com`.btn` vs `[class^="btn-"]` vs `[class*=" btn-"]` performance`.btn` vs `[class^="btn-"]` vs `[class*=" btn-"]` performance - benchmark-results.txt

My point wasn't about perf it was about why its brittle.. but also i think it would be helpful to say why not [attr|=value]

Artem Zakharchenko

@kettanaito.com

Called a prefix, gets used as a suffix, legitimate in my books! Jokes aside, that looks neat.

Tab Atkins-Bittner

Are you referring to þͤ * at þͤ end? That's just a *component* of þͤ selector; þͤ "class prefix" is þͤ foo- part that matches þͤ beginning of a class.